Binds links to the returned results for jQuery Autocomplete UI
Question
This code snippet is adapted from a jQuery tutorial
<,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 answers
solution1
1 ACCPTED 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.
You also need to save your data like this below. So the URL of autocomplete words can be opened when clicked on the selection.
To open the search results we can use window.open this mean the url will be opened in new tab.
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.)
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.