javascript - 单击后将结果放入文本框中

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

您需要对放入 div#result 元素中的项目进行一些事件委托(delegate)。你会想要这样的东西:

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

其中 RESULT_ITEM 是与自动完成结果中列出的各个项目相匹配的选择器。