如何重定向到 jQuery 中的新网页自动完成所选文本？

Question

根据 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="/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",
      "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>

但我需要为每个自动完成的文本制作一个 link 以便它转到另一页。例如，如果我单击“php”自动完成 ul 列表中的文本我需要在新选项卡中转到“php.net”网站。

希望得到帮助。提前致谢

Answer 1

您可以简单地使用 autocomplete 插件的 select 方法来检查选择了 drop-down 中的选项。

使用 if 条件，您可以检查是否选择了 PHP 然后您可以使用 window.open 方法为您打开一个新标签页 url。

要在新标签页中打开，我们可以指定并在 window.open 中添加 _blank 以确保打开新标签页。

工作 JS Fiddle: https://jsfiddle.net/9jgL5r2c/

现场工作演示：

$(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,
    select: function(event, ui) {
      //check PHP is selected
      if (ui.item.value == 'PHP') {
        window.open('http://php.net/', '_blank') //go to php.net 
      }
    }
  });
});

<!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>
  </script>
</head>
<body>
  <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
  </div>
</body>
</html>

如何重定向到 jQuery 中的新网页自动完成所选文本？

How to redirect to new Webpage autocomplete selected text in jQuery?

jquery

redirect

autocomplete