CODEWITHSUNDEEP
jquerytwitter-bootstrap
Akshay Takkar
Akshay Takkar

Reputation: 500

how to change the source property of typeahead in twitter bootstrap?

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

Upvotes: 4

Views: 9124

Answers (4)

pasx
pasx

Reputation: 2975

This has an answer here.

Update or change typeahead data

The way to do this is to use a BloodHound as a source. Whatever the data, remote or local, it is the only way I found to update the source dynamically.

None of the syntax above worked for me but that could be because my typehead search uses multiple sources.

Upvotes: 0

John Smith
John Smith

Reputation: 61

Eat this

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

Upvotes: -3

Sherbrow
Sherbrow

Reputation: 17379

You can't re-initialize the plugin if it's already in use.

Try updating the already at work typeahead : Live demo (jsfiddle)

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

Plugin code responsible (github)

Upvotes: 3

qxn
qxn

Reputation: 17584

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.

Upvotes: 1

Related Questions