时间戳

首页 > 解决方案 > 如何重定向到 jQuery 中的新网页自动完成选定文本？

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

问题描述

从 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>

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

希望得到帮助。提前致谢

标签： jqueryredirectautocomplete

解决方案

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

使用if条件，您可以检查是否PHP被选中，然后您可以url使用window.open方法打开一个新选项卡。

要在新选项卡中打开，我们可以指定并添加_blank我们的window.open以确保将打开一个新选项卡。

工作JS 小提琴： 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>

推荐阅读