Laravel Live Suche AJAX Eloquent Clickable Artikel

Question

Ich folgte this Tutorial, um eine Live-Suche mit AJAX und Eloquent (Zugriff auf die DB) in einer Laravel-App zu erstellen. Jetzt frage ich mich, wie ich die Suchergebnisse klickbar machen kann, also das Ding, auf das ich klicke, in das Eingabefeld eingetragen werde. Irgendwie scheint nur das Hinzufügen eines Klick-Handlers und dann das Setzen von .val() auf die Abfrage nicht zu funktionieren (erwarte, dass ich einen Fehler gemacht habe) ... PS: Ich benutze auch jQuery.

Wie könnte ich das tun? Hier ist der Code, um genau zu sein:

Blattvorlage:

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

JS dort (nicht fragen, habe ich eine Kleinigkeit hinzugefügt für den Benutzer warten Eingabe zu beenden, bevor AJAX Anfrage senden):

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

    } 
} 

und pHP-Datei/Funktion Verarbeitung:

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

Nun, wie kann ich bekommen, was ich will, so Durch Klicken auf den Gegenstand wird der Inhalt des Gegenstandes in das Eingabefeld eingefügt?

Answer 1

Sie können versuchen, Hinzufügen der Kategorie als Daten, nachdem sie mit jQuery, so etwas zu bekommen Attribut:

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

dann können Sie den Wert erhalten und mit einer Funktion wie folgt festgelegt:

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

Hier funktioniert die Idee: https://jsfiddle.net/yhwsy6x7/1/