jquery - 使用 Jquery 的自动完成功能进行点击搜索

Question

我正在尝试模拟 Youtube 自动完成搜索体验。

当查看者单击列出的项目并自动继续搜索该项目时，我找不到该选项。

我的编码如下:

<script type="text/javascript">
  var data = ['array1','array2'];
  $(document).ready(function() {
    $j("input#directorySearch").autocomplete(data);
  });
</script>

上面的代码将允许用户单击列出的项目，但是，它将填充搜索框而不是自动搜索。

Answer 1

我想要类似的行为，使用 jQueryui 的默认自动完成小部件。诀窍是使用“select”事件，但从选择处理程序提交不会给出所需的结果，因为输入尚未填充选择。

以下代码对我有用:

$("input#searchbox").autocomplete({
  source: autocomplete,
  select: function(event, ui) { 
    $("input#searchbox").val(ui.item.value);
    $("#searchform").submit();
  }
})

(在上面的示例中，“autocomplete”是指向完成源的 url)

其中 input#searchbox 是实际的输入条目，#searchform 是其父表单。基本上，您需要在提交之前填写输入内容。