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元素的项目执行一些事件委派。你会想要这样的东西：

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

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

Answer 2

虽然我深入研究了你是否考虑过使用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版本兼容。

单击后将结果放在文本框中

2 个答案: