Twitter typeahead autocomplete to dynamically adde

Question

I am using Twitter typeahead on my website and it works fine. But when I try to add new input dynamically it doesn't work. What could be the problem?

Thank you for replies.

    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

I have a very simple way to solve it, use the Function instead of Dynamic input. I mean: typeahead="item in calculatedInput($viewValue)"

---

The root problem about using typeahead="item in $scope.dynamicArrayInput is: When the model change -> ng-change and typeahead fire event synchronize start So while calculatedInput() function doing something for get a dynamic input, the typeahead said model "jump in $scope.dynamicArrayInput then get something like $viewValue RIGHT NOW". And then filter $viewValue in []. When calculatedInput() finish his work, typeahead already found nothing and do not fire event until u change model one more time. So you always filter typeahead in (lastest - 1) dynamic array.

Answer 2

What I did was I wrapped this into a function

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

and than before adding the dynamic input I run

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

and after the element is created

typeahead_initialize();

Works for me, hope this helps.