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项目中实现typeahead的方法。请参考我的工作代码。在视图页面

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

当ajax调用时，jquery typeahead插件不起作用

2 个答案: