[英]how do i add links to search suggestions?
我是一个用 js 编码的新手,我只有一个简短的自学 html 知识。 任何帮助将不胜感激,谢谢。
这是具有自动完成功能的搜索框的 javascript。 我问我如何为每个变量添加链接。
<script>
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Single Seats": null,
"Multiple Seats": null,
"Beds": null,
"Entertainment": null,
"Tables": null,
"Storage": null,
"Sets": null,
"Other": null
}
});
});
</script>
检查代码段,这将重定向到附加到自动完成数组的链接。 这里的自动完成数组具有带有值和 url 的对象,页面将根据选择的值重定向到适当的 url。 为了测试,所有值都设置为 google。 :)
var $ = jQuery; $( function() { var availableTags = [ {value:"ActionScript", link:'https://google.com'}, {value:"AppleScript",link:'https://google.com'}, {value:"Asp",link:'https://google.com'}, {value:"BASIC",link:'https://google.com'}, {value:"C",link:'https://google.com'}, {value:"C++",link:'https://google.com'}, {value:"Clojure",link:'https://google.com'}, {value:"COBOL",link:'https://google.com'}, {value:"ColdFusion",link:'https://google.com'}, {value:"Erlang",link:'https://google.com'}, {value:"Fortran",link:'https://google.com'}, {value:"Groovy",link:'https://google.com'}, {value:"Haskell",link:'https://google.com'}, {value:"Java",link:'https://google.com'}, {value:"JavaScript",link:'https://google.com'}, {value:"Lisp",link:'https://google.com'}, ]; $( "#tags" ).autocomplete({ source: availableTags, select: function( event, ui ) { console.log(ui.item.link); window.location.replace(ui.item.link) } }); } );
<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="/resources/demos/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> </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>
我认为你需要这个:
<!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="/resources/demos/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",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.