JQuery 自动完成，其中结果是链接答案

【问题标题】：JQuery Autocomplete Where the Results are LinksJQuery 自动完成，其中结果是链接
【发布时间】：2011-05-30 23:31:28
【问题描述】：

我正在尝试创建一个 JQuery 自动完成框，其中建议用于自动完成的单词是链接（类似于 Facebook 或 Quora 上发生的情况）。

基本上，我希望自动完成结果下拉，我希望人们能够点击它们并导航到不同的页面。这是我目前使用的代码

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
    source: ["Spencer Kline", "Test Test Test Test Test Test Test Test Test", "php", "coldfusion", "javascript", "asp", "ruby"]
});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<input id="autocomplete" />

</body>
</html>

【问题讨论】：

标签： html jquery autocomplete hyperlink

【解决方案1】：

这很简单。将源更改为对象数组，例如：

var source = [ { value: "www.foo.com",
                 label: "Spencer Kline"
               },
               { value: "www.example.com",
                 label: "James Bond"
               },
               ...
             ];

只使用select方法重定向到'value'，例如：

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });
});

【讨论】：

我是 JQuery 新手，我应该将重定向语句放在代码中的什么位置？
@Spencer - 我刚刚添加了一个小提琴。这应该说清楚。
谢谢，我真的很感激。但是，我是一个新手，我无法让它工作。我将 JQuery 内容放在中，将 HTML 内容放在中。我还有什么需要做的吗？
正是我想要的。我没改源，把select改成：window.location.href = "/search.php?keyword="+ui.item.value;
是否可以不使用 jQuery，仅使用 datalist 属性？