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

user_8920802 0
Viewed 58

From the official documentation of jquery i tried this below code to autocomplete searchbox.

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

But i need to make a link to each autocompleted text so that it will take to another page .For Ex, if i click on "php" text from autocomplete ul list i need to go to "php.net" website in new tab.

Hoping to get help. thanks in advance

autocomplete redirect jquery
1 Answers

You can simply use a select method of autocomplete plugin to check for what option was from the drop-down was selected.

Using an if condition, you can check if PHP was selected then you can open a new tab to you url using window.open method.

To open in a new tab we can be specific and add _blank in our window.open to be sure that a new tab will be opened.

Working JS Fiddle: https://jsfiddle.net/9jgL5r2c/

Live Working Demo:

$(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>

user_136690480
Related