ajaxコールでjquery typeaheadプラグインが動作しない

Question

このフォーラムでtypeaheadプラグインに関するすべての質問を検索し、可能な限りすべての方法を試しました。しかし、私はまだ問題があります。私はcodeigniterを使用して、aaaxを介して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()機能がうまく機能し、私は結果の配列を見ることができますが、ドロップダウンメニューが表示されません。バンドルと先行のjsファイルとcssファイルをロードしました。助言がありますか？

Answer 1

これは、私がCodeIgniterプロジェクトでtypeaheadを実装した方法です。私の作業コードを参照してください。コントローラ

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

ビューでページ

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

で、私はあなたのコントローラが正しいと思います。それが動作しない場合は、以下の問題をコメントしてください。私は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' 
     }); 
    } 
}