Question

i’m using twitter bootstrap 2.0.4. i want to populate the dropdown using ajax.
the source property of the typeahead plugin requires the value of source to 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 alert box shows the data loaded from ajax is correct but the dropdown still shows the previous values

Answer 1

I don’t think that version supports populating typeahead with ajax out-of-the-box. There are versions of the plugin, though, that do support it.

Here’s one. I don’t remember if that’s the same one I’m using, but if it is, it works very well. I’ll find out for sure and update this answer.

Update:

Here is a question you should look at. This extension given in the selected answer is the one I use.