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