Remote bootstrap typeahead not working

Question

I have a form with a category dropdown (with options Gems, Programming Languages, Databases etc.) and a textfield that should be autocomplete based on query from the server side. My code is working till the ajax call as its returning the correct result set as JSON response. But the autocomplete drop down is not showing.

$(document).ready(function() {
    var bestPictures = new Bloodhound({
    datumTokenizer: function (d) { 
      return Bloodhound.tokenizers.whitespace(d.value)},
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: { 
       url: '/typeahead',
       replace: function(url, uriEncodedQuery) {
        var categoryID = $('#user_skills_attributes_1_category_id').val();
     return url + "?q="+uriEncodedQuery+ "&category_id=" + encodeURIComponent(categoryID)
  }
 }
});

bestPictures.initialize();

$('#user_skills_attributes_1_name').typeahead({highlight: true}, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures.ttAdapter()
});
 })

Answer 1

I also came across such issue. Try using a lower version of typeahead. It might solve your issue.