jquery - Typeahead 3 inside div overflow-x

Question

我有一个类为“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

Answer 1

• 一个绝对定位的元素实际上是相对于一个 亲戚，或最近找到的亲戚，这意味着它 冒泡 DOM，直到它找到一个相关的上下文来应用 定位。
• 如果没有找到亲戚，那么它将达到最高 可能的 « container »，它是浏览器窗口，又名 viewport(或者可能是文档，或者窗口……？嘿，你知道吗， 我不是 W3C 专家好吧!)。

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

在你的情况下:

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

Updated fiddle

Source