ライブ検索からの提案を選択し、入力タイプタグで表示

Question

ライブ検索を作成しましたが、検索後に使用可能な候補から1つの提案を選択し、htmlの入力タイプタグに表示します。私はcodeigniterと組み合わせたjqueryを使用しています。したがって、以下は、jqueryを含むコントローラ、モデル、およびビューのコードです。

コントローラー/ users.php：

public function live_search() 
     { 
      $search= $this->input->post('customer_name'); 
      $query = $this->User_model->getCustomer($search); 
      echo json_encode ($query); 
     } 

モデル/ User_model.php：

function getCustomer($search) 
     { 
      $this->db->select('customer_name'); 
      $this->db->like('customer_name', $search, 'both'); 
      $this->db->from('customer_details'); 
      $query = $this->db->get(); 
      return $query->result(); 
     } 

ビュー：そう

<script> 
     $(document).ready(function() 
     { 
      $("#customer_name").keyup(function() 
      { 
       if($("#customer_name").val().length>2) 
       { 
        $.ajax({ 
         type: "post", 
         url: "http://127.0.0.1/atop/live_search", 
         cache: false,  
         data:'customer_name='+$("#customer_name").val(), 
         success: function(response){ 
         $('#finalResult').html(""); 
         var obj = JSON.parse(response); 
         if(obj.length>0) 
         { 
          try 
          { 
           var items=[]; 
           $.each(obj, function(i,val) 
           {   
            items.push($('<ul/>').text(val.customer_name)); 
           }); 
           $('#finalResult').append.apply($('#finalResult'), items); 
          } 
          catch(e) 
          { 
           alert('Exception while request..'); 
          } 
         } 
         else 
         { 
          $('#finalResult').html($('<ul/>').text("No Data Found")); 
         }}, 
         error: function() 
         {  
          alert('Error while request..'); 
         } 
       }); 
      } 
      return false; 
      }); 
      }); 
    </script> 
<div class="col-md-12"> 
         <label>Customer Name:</label><br> 
         <input type="text" name="customer_name"    id="customer_name"> 
         <ul id="finalResult"></ul> 
        </div> 

、どうすればそれを得ることができますか？

Answer 1

あなたはajaxを使用してthisリンクからあなたの方法を見つけることができます。