2017-08-02 24 views
0

私はcodeignitorに新規で、jquery autocompleteをデータベースから取得しようとしています。このトピックについて既に多くの質問がありましたが、それらのどれも私を助けませんでした。ここでJqueryオートコンプリートは結果を出すことはありません

は私のスクリプト機能は、ビューファイルからのもので、ここで

ビュー

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"> 
</script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery- 
ui.css" /> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 
</script> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 



<script type="text/javascript"> 
    $(function() { 
     $("#vname").autocomplete({ 
    source: function(request, response) { 

     $.ajax({ 
     url: "vendor/search", 
     data: { term: $("#vname").val()}, 
     dataType: "json", 
     type: "GET", 
     success: function(data){ 
      var resp = $.map(data,function(obj){ 
       return obj.tag; 
      }); 

      response(resp); 
     } 
    }); 
}, 
minLength: 2 
    }); 
    }); 
    </script> 
    </head> 
    . 
    . 
    . 
    . 
    <input type="text" class="form-control" name="vendor_name" id="vname" /> 

は、私は、データベースからの提案の配列を取得しようとしていたから、コントローラ(ベンダー)機能(検索)である

コントローラ

public function search() 
{ 

$json = []; 

    $this->load->database(); 
    if(!empty($this->input->get("term"))){ 
     $this->db->like('name', $this->input->get("term")); 
     $query = $this->db->select('id,name as text') 
        ->limit(10) 
        ->get("vendors"); 
     $json = $query->result(); 
    } 
    echo json_encode($json);   
} 

入力フィールドに入力すると何も起こりません(オートコンプリートは表示されません)が、直接アクセスして何かをパラメータとして渡している間、ベンダー/検索機能が正常に動作しています。私は$_GET[term]は常に空または何かだと思います。

私は今何をすべきか考えていません。

+0

代わりにコントローラでget()を試すことができ、ajaxタイプで "POST"の場合、 – user4419336

+1

私はすでにそれを試しました。は動作しませんでした – Whoosis

+1

'' dataType: "json"、 '' Ajaxリクエストからの削除 –

答えて

0

変更コントローラ

public function search(){ 
    $json = []; 
    $this->load->database(); 
    if(!empty($this->input->get("term"))){ 
     $this->db->like('name', $this->input->get("term")); 
     $query = $this->db->select('id,name as text') 
        ->limit(10) 
        ->get("vendors"); 
     $json = $query->result(); 
    } 
    //set page header 
    $this->output 
     ->set_content_type('application/json') 
     ->set_output(json_encode($json)); 
} 

スクリプトタグ

<script type="text/javascript"> 
$(function() { 
    $("#vname").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "<?=base_url(); ?>vendor/search?term="+request.term, 
     dataType: "json", 
     type: "GET", 
     success: function(data){ 
      response($.map(data, function (value, key) { 
      return { 
       label: value.text, 
       value: value.id 
      } 
      })); 
     } 
     }); 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
     //select event of autocomplete 
     console.log("id : ",ui.item.value); 
     console.log("text : ",ui.item.label); 
     $('#vname').val(ui.item.label); 
     return false; 
    }, 
    }); 
}); 
</script> 
0

変更するには、この行に置き換えます。

url: "vendor/search", 

へ:

url: "<?php echo base_url('vendor/search'); ?>", 
関連する問題