クリックすると結果がテキストボックスに表示されます

Question

私は完全に動作しているjqueryで自動完成しています。ユーザーが入力すると結果が表示されます。ユーザが所望の結果をクリックすると、ユーザーが入力を始めると、結果が表示されたときに今の問題は、それがテキストボックス

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

これを掘り下げながら、これを実現するためにjQuery UIを使用することを検討しましたか？

https://jqueryui.com/autocomplete/

これは、あなたが欠けている正確に何をしての素晴らしいと研磨方法です。ここで言われていること

私の提案は、この問題に完全に有効な解決策であるように私がダウンして実際に投票し取得していますなぜ、非常にわからない...

はあなたのための作業フィドルです。

https://jsfiddle.net/wxr5y5gu/

あなたが不足しているように見える主要部分は次のようなものです：

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

、結果をクリアクリックする値を設定して、あなたのために結果ボックスを非表示になります。

それはあなたのために働いています。私はAJAXのローカルリソースにアクセスすることができないので、私は自分の外見を推論して自分のオートフィルを作成して、それがどのように元気に働くかを示していましたが、

このソリューションはあなたのコードを使用し、現在のすべてのjQueryバージョンと互換性があります。

Answer 2

div#result要素に配置されたアイテムに対して、イベント委任を行う必要があります。 RESULT_ITEMは、オートコンプリートの結果に表示されている個々の項目に一致するセレクタである

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

：あなたはこのような何かをしたいでしょう。