Typeahead根本不起作用

时间:2016-06-28 22:58:42

标签: jquery typeahead.js typeahead bootstrap-typeahead twitter-typeahead

使用twitter typeahead:https://twitter.github.io/typeahead.js

我正在尝试通过data-typeahead属性初始化多个预先输入,该属性代表我想用作源的网址的一部分。

我需要能够在将动态新[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
});

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

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

每个循环都会破坏所有现有的类型,然后重新初始化它们。

我在这上花了几个小时,这是唯一有效的解决方案。

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
        });
    });
}