Bootstrap typeahead не работает с моим следующим кодом

Question

У меня есть код для поиска мест. Сервер правильно возвращает данные в формате json, но typeahead не показывает результаты.

<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> 

Сервер возвращает данные в формате JSON пример показан ниже, когда ключевое слово Пуна набран

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} 

Answer 1

Вы не возвращал результат вашего АЯКС запроса на машинописный source. Эта строка кода:

return process(places); 

внутри success обработчик $.ajax, поэтому он возвращает только places к этой функции.

Вы должны изменить свой код на:

$('#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); 
      } 
     }); 
    } 
}); 

Надеется, что это помогает