Trouble updating Bootstrap's typeahead data-source with post response

Question

Using Bootstrap's typeahead javascript plugin, I'm attempting to change the data-source attribute via jQuery's $.post method. Initially, I have:

<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]">

Then, let's say a button is clicked and it tries to update the data-source:

 $('button').on('click',function(){
     $.post('update.php',function(resp){
          $('input').attr('data-source',resp);
     });
  });

The resp XHR result returns an array like this:

  ["One Option","Two Option","Three Option"]

I'm finding that this does not reliably update the data-source with a new array that was constructed in the response.

Does anyone know what the problem could be?

This does not appear to capture the selected value. Does anyone know how to get the selected value using typeahead with Bootstrap?

Solution

I eventually figured out how to do this. It is outlined on github here.

Access the typeahead input's data attribute and modify the source array directly. E.g:

var autocomplete = $('input').typeahead();

//where newSource is your own array
autocomplete.data('typeahead').source = newSource; 

Comments

[Vikram]

Why statements are not executing after autocomplete.data('typeahead').source = newSource;