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

【问题标题】：Search on Click with Jquery's Autocomplete使用 Jquery 的自动完成功能进行点击搜索
【发布时间】：2011-03-21 03:58:40
【问题描述】：

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

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

我的编码如下：

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

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

【问题讨论】：

标签： jquery autocomplete youtube

【解决方案1】：

$(function() {
$( "#search" ).autocomplete(
    {
         source:'/search-terms.php',
         focus: function(event, ui) {
             $("input#search").val(ui.item.label);
         },
         select: function(event, ui) {

            $("#searchform button").click(); }
    })
});

我正在使用这个工作正常:)

【讨论】：

【解决方案2】：

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

以下代码对我有用：

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

（在上面的示例中，'autocomplete' 是指向完成源的 url）

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

【讨论】：

请问我如何在 asp.net 中执行此操作？

【解决方案3】：

$j("input#directorySearch").result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

官方文档：http://docs.jquery.com/Plugins/Autocomplete/result#handler

【讨论】：

【解决方案4】：

最初，我使用了一些简单的东西，例如Bassistance.de

我继续使用 devBridge 的另一个库

devBridge 有一个名为“onSelect:”的选项，它允许我自动提交表单。

【讨论】：

【解决方案5】：

你就不能这样做吗：

$('.autocomplete ul li').live("click", function() {
  $("form#search").submit();
});

您的选项列表上的点击事件在哪里触发您的搜索表单的表单提交？？

【讨论】：

刚回来尝试这个解决方案，但显然，表单不会提交。似乎还有另一个监听器，因为当单击该项目时，它将首先填写输入表单。