jquery - Bootstrap typeahead not working with my following code -

i have code search places. server returning data in json format correctly typeahead not showing results.

<script type="text/javascript"> $(document).ready(function(e) {     $('#txt_ser').typeahead({       minlength:1,       source: function (query, process) {           var places = [];           var map = {};           $.ajax({               datatype: "json",               url: "<?php echo base_url() . "ajax/ser";?>",               data: 'q='+query,               type: 'post',               success: function (data) {                   $.each(data, function(i, place){                       map[place.yt_center_state] = place;                       places.push(place.yt_center_state);                   });                   return process(places);                }           })       }     }); }); </script> 

server returning data in json format example shown below when keyword pune typed

0: {yt_center_top_city:pune, yt_center_state:mh} 1: {yt_center_top_city:pune, yt_center_state:mh} 2: {yt_center_top_city:pune, yt_center_state:mh} 3: {yt_center_top_city:pune, yt_center_state:mh}  

you didn't return result of ajax request typeahead source. line of code:

 return process(places); 

is inside success handler of $.ajax, returns places function.

you should change code to:

$('#txt_ser').typeahead({   minlength:1,   source: function (query, process) {       var places = [];       var map = {};       return $.ajax({   // <- add return here           datatype: "json",           url: "<?php echo base_url() . "ajax/ser";?>",           data: 'q='+query,           type: 'post',           success: function (data) {               $.each(data, function(i, place){                   map[place.yt_center_state] = place;                   places.push(place.yt_center_state);               });               return process(places);           }       });   } }); 

hope helps