LaravelのLive Search AJAX雄弁クリッカブルアイテム

Question

私はlaravelアプリでAJAXと雄弁（DBアクセス）でライブ検索を作成するthisチュートリアルを追いました。今、私は検索結果をクリック可能にする方法を考えています。そのため、クリックしたものが入力フィールドに入力されます。どういうわけか、単にクリックハンドラを追加し、クエリに.val()を設定すると（期待し、私はミスを犯した）動作していないようだ... PS：私は、同様にjQueryを使用しています。

私はそれをどのように行うことができますか？ここでのコードは、正確には：

ブレードテンプレート：そこに

<div id="content"> 
    <input type="search" name="keyword" placeholder="Search Names" id="searchbox"> 
    <div id="results"></div> 
</div> 

JS（私はAJAXリクエストを送信する前に入力を完了するためにユーザを待つ小さなことを追加して、不思議はありません）：

$(document).ready(function() { 
     var typingTimer;    //timer identifier 
     var doneTypingInterval = 300; //time in ms (5 seconds) 

     $("#searchbox").on('keyup', function() { 
      clearTimeout(typingTimer); 
      if ($('#searchbox').val()) { 
       typingTimer = setTimeout(doneTyping, doneTypingInterval); 
      } 
     }); 
    }); 

    //user is "finished typing," do something 
    function doneTyping() { 
     var key = $('#searchbox').val(); 

     if (key.length >= 3) { 
      $.ajax({ 
       url: '/categorysearch/' + key, 
       type: 'GET', 
       beforeSend: function() { 
        $("#results").slideUp('fast'); 
       }, 
       success: function (data) { 
        $("#results").html(data); 
        $("#results").slideDown('fast'); 
       } 
      }); 

    } 
} 

とPHPファイル/関数処理：

public function Index(Request $request){ 
     $query = "%".$request->categorySearchTerm."%"; 
     $categories = Subcategory::where('name','LIKE',$query)->get(); 
     foreach($categories as $category){ 
      echo "<div id='item'>$category->name</div>"; 
     } 
    } 

今、私は、私が欲しいものを得ることができる方法アイテムをクリックすると、アイテムの内容が入力フィールドに表示されますか？

public function Index(Request $request){ 
    $query = "%".$request->categorySearchTerm."%"; 
    $categories = Subcategory::where('name','LIKE',$query)->get(); 
    foreach($categories as $category){ 
     echo "<div id='item' data-name='$category->name'>$category->name</div>"; 
    } 
} 

、あなたが値を取得し、このような機能を設定することができます：

$(document).on('click', '#item', function() { 
    $('input').val($(this).data('name')); 
}); 

データは、このようなjQueryの何かをした後に取得する属性として

Answer 1

あなたは、カテゴリを追加してみてくださいすることができますここでのアイデアの働きは：https://jsfiddle.net/yhwsy6x7/1/