Typeahead 根本不起作用

Question

使用推特提前输入：https://twitter.github.io/typeahead.js

我正在尝试通过 data-typeahead 属性初始化多个预输入，该属性表示我想用作源的 URL 的一部分。

我需要能够在动态新 [data-typeahead] 元素添加到页面后调用它。

我的代码根本不起作用。它甚至不适用于页面上已有的 [data-typeahead] 个元素。

$('[data-typeahead]').typeahead({
    source: function (query, process) {
        $.get(this.$element.data('typeahead')+'/'+query, function (data) {
            alert(data);
            process(data);
        });
    },
    items: 10
});

如有任何帮助，我们将不胜感激。

Answer 1

必须创建一个包含 each 循环的新函数并在页面加载时调用它，以及任何时候将新的预输入元素添加到 DOM。

each 循环会破坏所有现有的预先输入，然后重新初始化它们。

我为此花费了数小时，这是唯一有效的解决方案。

function initialize_typeaheads () {
    $('[data-typeahead]').each(function () {
        var element = $(this);

        element.typeahead('destroy');

        var results = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: element.data('typeahead')+'/'+'%QUERY',
                wildcard: '%QUERY'
            }
        });

        element.typeahead(null, {
            source: results,
            limit: 10
        });
    });
}

Typeahead 根本不起作用

Typeahead doesn't work at all

jquery

typeahead

bootstrap-typeahead

typeahead.js

twitter-typeahead