预输入根本不起作用答案

【问题标题】：Typeahead doesn't work at all预输入根本不起作用
【发布时间】：2016-06-28 22:58:42
【问题描述】：

使用 twitter 预输入：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
});

任何帮助将不胜感激。

【问题讨论】：

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

【解决方案1】：

必须创建一个包含 each 循环的新函数，并在页面加载时调用它，以及在任何时候将新的 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
        });
    });
}

【讨论】：