Platzieren Ergebnisse in einem Textfeld nach dem Klick

Question

Ich arbeite an einer Auto-Vervollständigung mit Jquery, die perfekt funktioniert. Die Ergebnisse werden angezeigt, wenn der Benutzer tippt. Das Problem ist jetzt, wenn der Benutzer beginnt die Eingabe und die Ergebnisse erscheinen, wenn der Benutzer auf den gewünschten Ergebnisse klickt, ist es nicht in der Textbox gestellt bekommen

JS

$(function(){ 
$(".search_tab").keyup(function() 
{ 

var searchid = $(this).val(); 
var dataString = 'fname='+ searchid; 
if(searchid!='') 
{ 
    $.ajax({ 
    type: "POST", 
    url: "http://localhost/myapp/search.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 
    //console.log(html) 
    $("#result").html(html).show(); 
    } 
    }); 
}return false;  
}); 

$('.search_tab').click(function(){ 
    jQuery("#result").fadeIn(); 
}); 
}); 

HTML

<input type="text" class="search_tab" placeholder="Search" autocomplete="off"> 
    <div id="result"></div> 

Answer 1

Während ich mich mit diesem Thema beschäftigen, haben Sie darüber nachgedacht, jQuery UI zu verwenden, um dies zu erreichen?

https://jqueryui.com/autocomplete/

Dies ist ein schöner und poliert Weg, um genau zu tun, was Sie wollen.

Nicht ganz sicher, warum ich immer nach unten gestimmt wirklich wie mein Vorschlag eine absolut gültige Lösung für dieses Problem ist ...

Das hier gesagt wird, ist eine Arbeits Geige für Sie.

https://jsfiddle.net/wxr5y5gu/

Der Hauptteil Sie scheinen zu fehlen, so etwas wie dieses:

$('#result').on('click','li',function(){ 
    /* I used li as the element as im unsure what your response html looks like */ 
    let newValue = $(this).text(); 
    $('.search_tab').val(newValue); 
    $('#result').html('').hide(); 
}); 

, dass die Ergebnisse klar wird, stellen Sie den Wert geklickt haben, und verstecken Sie die Ergebnisse Feld.

Das enthält eine funktionierende soution für Sie. Da ich keinen Zugang zu AJAX lokalen Ressourcen habe, musste ich extrapolieren und meine eigene Autofill erstellen, um zu zeigen, wie es im Prinzip funktioniert, aber ich kann Ihnen sicherlich dabei helfen, die Lösung an Ihre Bedürfnisse anzupassen.

Diese Lösung verwendet Ihren Code und ist mit allen aktuellen jQuery-Versionen kompatibel.

Answer 2

Sie müssen einige Ereignisse delegieren über die Elemente, die in das Element div#result platziert werden. Sie werden so etwas wie dies wollen:

$('#result').on('click', 'RESULT_ITEM', function (event) { 
    $('input.search_tab').val(event.target.innerHTML); 
}); 

Wo RESULT_ITEM ein Selektor ist, dass die einzelnen Positionen übereinstimmt, die in den zur automatischen Vervollständigung Ergebnisse aufgeführt sind.