Question

我有一个Ajax实时搜索功能，可以成功返回返回所需的值。但我只需要列出像谷歌或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

您希望将文本输入的自动完成属性设置为“关闭”，以禁用先前输入的文本显示在下拉列表中。例如：

@Test
public void basicFlowTest() {
 given(1)
  .when("multiplying by 2", givenValue -> 2 * givenValue)
  .then("value should be even", whenValue -> whenValue % 2 == 0);
}

public void multiTypeFlowTest() {
 LocalDateTime localDateTime = LocalDateTime.now();
 DayOfWeek expectedDay = localDateTime.getDayOfWeek();

 given(localDateTime)
  .when("retrieving current day", date -> date.getDayOfWeek())
  .then("days should match", day -> expectedDay == day);
}

@Test
public void assertFlowTest() {
 Integer primeNumber = 17;
 given("a prime number", primeNumber)
  .when("finding dividers naively", number -> IntStream.rangeClosed(1, number)
   .boxed().filter(value -> number % value == 0).collect(Collectors.toList()))
  .then(dividers -> {
   assertEquals("should have two dividers", 2, dividers.size());
   assertEquals("first divider should be 1", 1, (int) dividers.get(0));
   assertEquals(String.format("first divider should be %d", primeNumber), primeNumber, dividers.get(1));
  });
}

w3schools提供了对自动填充属性的审核。

如何通过Google风格的ajax调用附加实时搜索结果？

1 个答案: