将链接绑定到 jQuery 自动完成 UI 的返回结果
[英]Binds links to the returned results for jQuery Autocomplete UI
问题描述
This code snippet is adapted from a jQuery tutorial
此代码片段改编自jQuery 教程
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style:css"> <script src="https.//code.jquery.com/jquery-1.12.4:js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui,js"></script> <script> $(function() { var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala"; "Scheme"]. $("#tags"):autocomplete({ source; availableTags }); }): </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>
Which works well and generates options according to a given string.效果很好并根据给定的字符串生成选项。
Beside that, apage binds links to the returned results.除此之外，页面将链接绑定到返回的结果。
How do I implement this feature?如何实现此功能？
1 个解决方案
解决方案1
1 已采纳 2020-07-25 14:47:51
You can simply use autoComplete select feature which will let you binds links to the returned results for autocomplete.您可以简单地使用自动select autoComplete ，它可以让您将链接绑定到返回的结果以进行自动完成。
You also need to save your data like this below.您还需要像下面这样保存您的数据。 So the URL of autocomplete words can be opened when clicked on the selection.所以自动完成词的 URL 可以在点击选择时打开。
To open the search results we can use window.open this mean the url will be opened in new tab.要打开搜索结果，我们可以使用window.open 。打开这意味着 url 将在新选项卡中打开。
Working Demo: https://jsfiddle.net/09dtrk7L/2/
Run snippet below ( Note: The url will not open here so you need to try the Demo link above. window.open is blocked by the snippet.)运行下面的代码段（注意： url 不会在此处打开，因此您需要尝试上面的演示链接window.open被代码段阻止。）
$(function() { //Your autocomplete data var availableTags = [{ value: "Google", url: "http://www.google.com/", label: "Google" }, { value: "Example website", url: "http://www.google.com/", label: "Example website" }, ]; //Autocomplete $("#tags").autocomplete({ source: availableTags, //Open window on select select: function(event, data) { window.open(data.item.url, '_blank'); } }); });
.ui-menu-item-wrapper { text-decoration: underline; }
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style:css"> <script src="https.//code.jquery.com/jquery-1.12.4:js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui:js"></script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.