Question

我在我的网站上使用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);
    });

Answer 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();

适合我，希望这有帮助。

Answer 2

我有一种非常简单的解决方法，可以使用Function代替Dynamic input。我的意思是： typeahead =“计算输入（$ viewValue）中的项目”

在$ scope.dynamicArrayInput中使用typeahead =“ item的根本问题是：当模型更改-> ng更改并提前点火事件同步开始 因此，在calculatedInput（）函数为获取动态输入而做的事情的同时，提前输入了模型“在$ scope.dynamicArrayInput中跳转然后得到类似于$ viewValue RIGHT NOW ”的内容。然后在[]中过滤$ viewValue。当calculatedInput（）完成工作时，typeahead已经一无所获，并且不会触发事件，直到您再次更改模型。因此，您始终要在（最新-1个）动态数组中提前过滤。

Twitter类型自动完成动态添加输入

2 个答案: