结果是链接的 JQuery 自动完成

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4536055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:25:52  来源:igfitidea点击:

JQuery Autocomplete Where the Results are Links

htmljqueryautocompletehyperlink

提问by Spencer

I am trying to create a JQuery Autocomplete box where the words being suggested for autcomplete are links (similar to what happens on Facebook or Quora).

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

Basically, I want the autocomplete results to drop down and I want people to be able to click on them and be navigated to a different page. Here is the code I am currently using

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

<!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>

回答by karim79

This is simple. Change your source to an array of objects, such as:

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

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

The just use the select method to redirect to the 'value', e.g.:

只需使用 select 方法重定向到“值”,例如:

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