繁体   English   中英

如何添加指向搜索建议的链接?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM