CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptypeahead.js
Saravanan Sampathkumar
Saravanan Sampathkumar

Reputation: 3261

Twitter typeahead query not working

I had been using twitter bootstrap typeahead js for one of my project. I configured it for my needs and everthing has been working fine for about a month. Now all of a sudden, my code doesnot work and I haven't updated any code recently. I'm totally confused. Following is my code.

var colleges = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote : {
        url : url + '/autocomplete?query=%QUERY',
        ajax : {
            beforeSend: function(jqXhr, settings){
                $('.search-button').find('.fa').removeClass('fa-search').addClass('fa-refresh');
            },
            complete : function(){
                $('.search-button').find('.fa').removeClass('fa-refresh').addClass('fa-search');    
            }
        }
    }
});
colleges.initialize(); 

$('#colleges').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name: 'colleges',
    displayKey: 'name',
    slug : 'slug',
    source: colleges.ttAdapter()
}); 

$('#colleges').bind('typeahead:selected', function(obj, datum, name) {      
    window.location = url +'/'+ datum.slug;
});

$('.form').submit(function(e){
    if($('#colleges').val().length < 2){
        e.preventDefault();
    }
});

When I type nothing is passed for query parameter. The url goes like www.example.com/autocomplete?query=%QUERY instead of the actually query that user types. I dont get any error in console too.

Any suggestion?

Upvotes: 1

Views: 921

Answers (1)

DutchEcho
DutchEcho

Reputation: 155

I had the same issue. Seems they made a new version. It's as far as i understand a complete rewrite. So you need to add one line and all should work:

var colleges = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote : {
        url : url + '/autocomplete?query=%QUERY',
        wildcard: '%QUERY',**
        ajax : {
            beforeSend: function(jqXhr, settings){
            $('.search-button').find('.fa').removeClass('fa-search').addClass('fa-refresh');
            },
            complete : function(){
                $('.search-button').find('.fa').removeClass('fa-refresh').addClass('fa-search');    
            }
        }
    }
});

Add wildcard: '%QUERY', to your code in the bloodhound and all should do well

Upvotes: 3

Related Questions