typeahead twitter not working

Question

I am using twitter typeahead for the first time.

I have my json format like :

[{"merchant_name":"Myntra"},{"merchant_name":"Adlabs imagica"},{"merchant_name":"godaam"},{"merchant_name":"Homeshop18"},{"merchant_name":"Hotels.com"}]

I am converting this into an array and passing it to typeahead function. But this its not wrking. Please help me to solve this issue

  $('#search_bar').keyup(function(e){
        var searched = $('#search_bar').val()
        $.getJSON('<?php echo base_url();?>get_data','title='+searched,function(result){
        var elements = [];
        $.each(result,function(i,val){
               elements.push(val.merchant_name)
        })
        $('#searh_bar').typeahead({
                   source:elements
        })
   })
});

Answer 1

If it's really twitter typeahead you're using, then there are at least 2 things wrong here:

1) You shouldn't have to call .typeahead() on your elements after each key up, but rather once during initialization.

2) There is no source parameter in typeahead.js

From what you are trying to do, it really seems like you need something else: you want to query your server after each key press (use remote: for that), and convert the results (use filter: for that).

So something like:

$('#search_bar').typeahead({
  remote: {
    url: '<?php echo base_url();?>get_data?title=%QUERY',
    filter: function(parsedResponse) {
      var elements = [];
      $.each(parsedResponse, function(i, val) {
        elements.push(val.merchant_name);
      });
      return retval;
    }
  }
});