Laravel Live Search AJAX雄辯可點擊的項目

我跟着this教程來創建一個實時搜索與AJAX和雄辯（訪問數據庫）在laravel應用程序。現在我想知道，我怎樣才能使搜索結果可點擊，所以我點擊的東西被輸入到輸入字段。不知何故，只是添加一個點擊處理程序，然後設置.val()查詢似乎沒有工作（期望我犯了一個錯誤）... PS：我也使用jQuery。Laravel Live Search AJAX雄辯可點擊的項目

我該怎麼做？這裏的代碼，準確地說：

刀模板：在那裏

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

現在，我怎樣才能得到我想要的東西，所以點擊該項目將該項目的內容放入輸入欄中？

來源

2016-11-08 nameless

'echo「

name."'));">$category->name

」;'而不是你的代碼在foreach – mcklayin

看起來貌似合理，但只是一件事：在這個p hp文件（在控制器中），我沒有jquery可用（也許我的描述不夠清楚），我只是把它放在刀片模板中。我怎麼能沒有jQuery做到這一點？ – nameless

@mcklayin剛試過這個：'echo「

$categ‌ory->name

」;'但是它不起作用，說'解析錯誤：語法錯誤，意外'文件'（T_STRING），期待'，'或';'' – nameless

你可以嘗試添加類的數據屬性獲取與jQuery這樣的事情後：

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

這裏的主意工作：https://jsfiddle.net/yhwsy6x7/1/

來源

2016-11-08 17:52:00

工作正常，嘗試了很多，但現在它很容易;）謝謝;） – nameless

只是還有一個問題：我可以以某種方式讓點擊它和它的輸入後，搜索結果消失？或者這是更多的工作？ – nameless

您可以在設置輸入值的函數中刪除所有div到您的結果div中。 –

Laravel Live Search AJAX雄辯可點擊的項目

回答

相關問題