Typeahead 3 inside div overflow-x

Question

我有一个 div 和 class 'table-responsive'，它的 overflow-x 设置为 'auto'。

在此 div 中有一个输入文本，需要提前输入。当我发现结果以return 进入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 »，也就是浏览器 window，又名 viewport（或者可能是文档，或者 window ……？嘿，你知道吗，我不是 W3C 专家好吧！）。

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

你的情况：

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

Updated fiddle

Source

Typeahead 3 inside div overflow-x

Typeahead 3 inside div overflow-x

html

css

jquery

typeahead

bootstrap-typeahead