jquery - 如何以 Google 风格附加来自 ajax 调用的实时搜索结果？

Question

我有一个 Ajax 实时搜索函数，它可以成功返回它需要返回的值。但我只需要列出像 Google 或 Youtube 这样的结果，我不知道该怎么做(这是我第一次制作实时搜索功能)。所以我需要像这样返回值:

这是我当前的索引页代码:

<input type="text" value="" name="s" id="s" placeholder="Search">
<input type="submit" id="searchsubmit" value="Search" class="prefix button">

<ul id="searchresults" class="searchresults"></ul>

这是我的 ajax 函数:

$(document).ready(function() {

$('#s').typeWatch({
    captureLength: 2,
    callback: function(value) {

       $.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "searchq", s : value},
         success: function(response) {
            if(response.type == "success") {
               $.each(response.val,function(){
                  var li = $('<li/>').appendTo('#searchresults');
                  $('<a/>').text(this.post_title).attr('href',this.url).appendTo(li);       
               });
            }
          },
          error: function(errorThrown) {
          }
      })
   }
});//end typewatch event

});

这将返回如下结果:

结果确实出现在列表中，但它与 google 或 youtube 不同，您可以使用箭头键滚动浏览它。

当我单击第二张图像中的输入表单时，我会在其上显示标准下拉列表，这正是我想要的结果显示方式(但这仅显示我之前输入的内容)。

所以我的问题是如何在那里获取或创建结果？

我希望这足以清楚地理解我想要获得的东西。

(我选择不包含 php 函数，因为 100% 可以正常工作)

Answer 1

您想要将文本输入的自动完成属性设置为“关闭”，以禁止以前输入的文本出现在下拉列表中。例如:

<input type="text" autocomplete="off">

w3schools 提供了对自动完成属性的回顾。 .