Блог

Главная - Вопросы по программированию - Показывать выпадающий список с предложениями по автозаполнению jQuery

Показывать выпадающий список с предложениями по автозаполнению jQuery

#jquery #html #jquery-ui #razor #asp.net-mvc-5

#jquery #HTML #jquery-пользовательский интерфейс #razor #asp.net-mvc-5

Вопрос:

Мой автозаполнение jQuery работает почти нормально. После вставки «Af», если я нажму клавишу, я правильно получу «Афганистан». Однако я никогда не вижу выпадающий список со всеми странами. Я пропустил какую-то опцию автозаполнения?

Мой код:

 @Html.TextBox("Countries", "", new { @class = "COUNTRIES", @placeholder = "Insert Country..."}) 

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<script>
    $(function () {
        var countriesList = ["Afghanistan", "Albania", "Algeria"]
        $(".COUNTRIES").autocomplete({ source: countriesList });
    });
</script>

Комментарии:

1. Вам не хватает библиотеки пользовательского интерфейса jQuery для добавления!

2. Посмотрите на это ! Вам, должно быть, нужно ввести что-то в текстовое поле, чтобы автозаполнение работало 🙂

Ответ №1:

Вы можете увидеть этот пример в http://www.encodedna.com/2013/08/jquery-autocomplete-dropdown-list-on-focus.htm .

Он показывает выпадающий список при фокусировке на вводе путем добавления

 .focus(function() {$(this).autocomplete("search", "");})

И вы также можете установить стиль прокрутки.

Ответ №2:

Этот пример взят с сайта jquery

   $( 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
    });
  } ); 
   
   <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>
   
  
<html>  
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

Метки: