div overflow-x 内的 Typeahead 3答案

【问题标题】：Typeahead 3 inside div overflow-xdiv overflow-x 内的 Typeahead 3
【发布时间】：2016-10-31 12:10:52
【问题描述】：

我有一个带有“table-responsive”类的 div，它的 overflow-x 设置为“auto”。

在这个 div 中，有一个带有预输入的输入文本。当我发现结果返回到 typeahead 时，是在 div 里面。如何退出？

这是我的代码：

<div class="table-responsive">
    <fieldset>
        <legend>Righe</legend>
        <table id="dettaglioDocumento" class="table table-condensed table-fixed" cellspacing="0" width="100%">
        <col width="50px">
        <col width="350px">
            <thead>
                <tr>
                    <td></td>
                    <td><label class="align-table">Descrizione</label></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="<?= $root; ?>/assets/img/details_close.png" class="link removeRow"></td>
                    <td>
                        <input name="txtDescrizione[]" data-target=".container-fluid" class="form-control selectDescrizione" data-provide="typeahead" autocomplete="off" name="txtDescrizione_0" type="text" placeholder="" value="">
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>

这里是JS代码：

    $('.selectDescrizione').typeahead({
        minLength: 3,
        items: 5,
        delay: 400,
        source: function (query, response) {
            $.ajax({
                url: '<?= $root; ?>/get_listino',
                dataType: "json",
                type: 'POST',
                data: {
                    query: query
                },
                success: function (data) {
                    return response(data.listino);
                }
            });
        },
        displayText: function (item) {
            return item.testo;
        }
    });

图片如下：

更新 JSFiddle code

【问题讨论】：

你试过z-index吗？
@abhishek-pandey 是的，我尝试将其设置为高值，但没有...
如果您可以提供代码的工作小提琴，那将更容易调试您的代码。
由于overflow 类的overflow 属性而隐藏
我知道...你知道怎么解决吗？

标签： jquery html css typeahead bootstrap-typeahead

【解决方案1】：

绝对定位的元素实际上是相对于相对父母，或最近找到的相对父母，这意味着它使 DOM 冒泡，直到找到一个相关的上下文来应用定位。
如果没有找到相对父级，它将达到最高可能是« container »，这是浏览器窗口，也就是viewport（或者可能是文档，或者是窗口……？嘿，你知道吗，我不是 W3C 专家，好吧！）。

现在你只需要将位置静态设置为相对元素

在你的情况下：

.dataTables_wrapper {
    position: static;
    clear: both;
    zoom: 1;
}

Updated fiddle

Source

【讨论】：