ajax調用時jquery typeahead插件不起作用

Question

我在這個論壇中搜索了所有關於 typeahead 插件的問題，並嘗試了所有我能做的方法。 但我還有一個問題。 我正在使用 codeigniter 並希望通過 ajax 通過 typeahead 插件自動完成。 這是我的js代碼：

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    source: function (query, process) {
        $.ajax({
            url: baseUrl + 'panel/yazilarim/deneme',
            type: 'POST',
            data: 'query=' + query,
            dataType: 'JSON',
            async: true,
            success: function (data) {
                console.log(data);
                process(data);
            }
        });
    }
});

public function deneme() {
    $aranan = $this->input->post("query");
    $sorgu = $this->db->select("ad")->from("kategori")->where("ad LIKE '%" . $aranan . "%' ")->get();

    $sonuclar = $sorgu->result_array();
    $dizi = [];
    foreach ($sonuclar as $sonuc) {
        $dizi[] = $sonuc["ad"];
    }
    echo json_encode($dizi);
}

console.log()函數運行良好，我可以看到結果數組，但下拉菜單從未出現。 我已經加載了 bundle 和 typeahead js 文件和 css 文件。 有什么建議？

Answer 1

這就是我在我的 CodeIgniter 項目中實現預先輸入的方式。 請參考我的工作代碼。 在查看頁面

    <script src="<?php echo base_url('assets/js/typeahead.min.js'); ?>" > </script>
     <script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'<?php echo base_url(); ?>panel/yazilarim/deneme?query=%QUERY',
        limit : 5
    });
});
 </script>



<div class="form-group">
      <input type="text" name="member"  class="form-control typeahead" style="width:280px;"  autocomplete="off" >
</div>

在控制器中

public function deneme() {
    $aranan = $this->input->get("query");
    $sorgu = $this->db->select("ad")->from("kategori")->where("ad LIKE '%" . $aranan . "%' ")->get();

    $sonuclar = $sorgu->result_array();
    $dizi = [];
    foreach ($sonuclar as $sonuc) {
        $dizi[] = $sonuc["ad"];
    }
    echo json_encode($dizi);
}

我認為你的控制器是對的。 如果它不起作用，請在下面評論問題。記住我使用 get 方法。

Answer 2

你忘了返回結果。 請試試這個：

success: function (data) {
    console.log(data);
    return process(data);
}

另外，設置async:false屬性。

在非常基本的層面上，當您希望調用在后台發生時使用異步模式，而當您希望代碼等待調用完成時使用同步模式。

這是asyncronous版本。

source: function (query, process) {
   var getData = getData();
   getData.done(function(data){
      return process(data);
    // do stuff with `information` here, not elsewhere.
   });
   function getData(){ 
      return $.ajax({
        url: baseUrl + 'panel/yazilarim/deneme',
        type: 'POST',
        data: 'query=' + query,
        dataType: 'JSON'
      });
   }
}