как добавить ссылки на поисковые предложения? - PullRequest
Новая
       1

как добавить ссылки на поисковые предложения?

1 голос
/ 15 февраля 2020

Я довольно новичок в кодировании с 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>

Ответы [ 2 ]

0 голосов
/ 15 февраля 2020

Проверьте фрагмент, он будет перенаправлен на ссылку, прикрепленную к массиву автозаполнения. Здесь у массива автозаполнения есть объект со значением и 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>
0 голосов
/ 15 февраля 2020

Я думаю, вам нужно это: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...