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?

I think that you're not getting very many responses because we don't have a physical error to deal with. Can you post the XHR results? the params? perhaps the resp value is coming back in an array that is not acceptable. Are you not-quoting int values, and quoting varchar values? those kinds of things. It might be more helpful to your case. — Ohgodwhy, Feb 28 '12 at 07:36
You can use this customized typeahead plugin which allows for ajax data loading and custom text rendering: https://gist.github.com/3287063 — user1307794, Aug 10 '12 at 08:08

score 31 · Accepted Answer · edited Sep 20 '13 at 09:05

31

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;

edited Sep 20 '13 at 09:05

zessx

answered Mar 01 '12 at 01:12

T.S.

Why statements are not executing after `autocomplete.data('typeahead').source = newSource;` – Vikram Jan 29 '14 at 06:29

1 Answers1