Twitter typeahead 自动完成以动态添加输入答案

【问题标题】：Twitter typeahead autocomplete to dynamically added inputsTwitter typeahead 自动完成以动态添加输入
【发布时间】：2014-03-11 09:12:23
【问题描述】：

我在我的网站上使用 Twitter typeahead，它运行良好。但是当我尝试动态添加新输入时它不起作用。可能是什么问题呢？

感谢您的回复。

    var custom = new Bloodhound({
    datumTokenizer: function(d) { return d.tokens; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'http://'+window.location.hostname+'/invoice/loadItemOption?query=%QUERY'
    });

    custom.initialize();

    $('.typeahead_option_items').typeahead(null, {
          name: 'item_title[]',
          displayKey: 'invoice_item_option_title',
          source: custom.ttAdapter(),
          hint: (App.isRTL() ? false : true),
    }).on('typeahead:selected', function (obj, value) {
        console.log(value.invoice_item_option_title);
    });

【问题讨论】：

标签： jquery typeahead.js twitter-typeahead

【解决方案1】：

我所做的是将它包装成一个函数

function typeahead_initialize() {
 var custom = new Bloodhound({
    datumTokenizer: function(d) { return d.tokens; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'http://'+window.location.hostname+'/invoice/loadItemOption?query=%QUERY'
    });

    custom.initialize();

    $('.typeahead_option_items').typeahead(null, {
          name: 'item_title[]',
          displayKey: 'invoice_item_option_title',
          source: custom.ttAdapter(),
          hint: (App.isRTL() ? false : true),
    }).on('typeahead:selected', function (obj, value) {
        console.log(value.invoice_item_option_title);
    });
}

typeahead_initialize();

与添加动态输入之前相比，我运行

$('.typeahead_option_items').typeahead('destroy');

在元素创建之后

typeahead_initialize();

对我有用，希望对你有帮助。

【讨论】：

很高兴它对您有用！不要忘记给答案投票..:-)
没问题 :) 但我只等一个声望点来投赞成票.. :)
我收到 TypeError: $(...).typeahead is not a function when I put $('.typeahead_option_items').typeahead('destroy');在一个函数中。但在功能之外 .typeahead 被识别并工作。为什么？

【解决方案2】：

我有一个非常简单的方法来解决它，使用函数而不是动态输入。我是说： typeahead="计算输入中的项目($viewValue)"

在 $scope.dynamicArrayInput 中使用 typeahead="item 的根本问题是：当模型更改 -> ng-change 和 typeahead 触发事件 同步开始 因此，当计算输入（）函数为获取动态输入做一些事情时，预先输入的模型说模型“跳转到 $scope.dynamicArrayInput 然后得到类似 $viewValue RIGHT NOW 的东西”。然后在[]中过滤$viewValue。当calculatedInput() 完成他的工作时，typeahead 已经什么也没找到，并且在你再次更改模型之前不要触发事件。所以你总是在 (lastest - 1) 动态数组中过滤 typeahead。

【讨论】：