How to change the original typeahead property in twitter bootstrap?

Question

I am using twitter bootstrap 2.0.4. I want to populate a dropdown with ajax. The source property of the typeahead plugin requires that the source value be either an array or a function. I tried changing the value of the array after the ajax request, but it only displays the results of the first request.

<form class="navbar-search"> <input type="text" id="searchSong" class="typeahead" placeholder="Search"> </form> $('.typeahead').keyup(function(){ var list; var q = $('.typeahead').val(); if(!q){ return; } $.ajax({ type: "GET", url: "/WebApplication1/Playlist/search?query="+q, success: function(data){ list = data.split(','); alert(list); $('.typeahead').typeahead({ source: list }) } }); 

the warning window shows the data downloaded from ajax, but the previous values ​​are still displayed in the drop-down list

Answer 1

I don't think this version supports typeahead padding with ajax out of the box. However, there are versions of the plugin that support it.

Here is one . I don’t remember if it’s the same that I use, but if it is, it works very well. I know for sure and am updating this answer.

Update:

This is the question you should pay attention to. This extension indicated in the selected answer is the one I am using.

Answer 2

You cannot reinitialize the plugin if it is already in use.

Try updating already at the workplace: Live demo (jsfiddle)

 var typeahead = $('.typeahead').data('typeahead'); if(typeahead) typeahead.source = list; else $('.typeahead').typeahead({source: list}); 

Plugin code (github)

Answer 3

Eat it

  $.get('/my_url/' + some_params, function(data){ $("#address-field").typeahead().data().typeahead.source = data },'json');