jQuery - получить значение элемента автозаполнения - PullRequest
Новая
       1

jQuery - получить значение элемента автозаполнения

0 голосов
/ 06 июня 2018

Я хочу получить значение для автозаполнения текстового поля.Я пытался использовать следующий код, но он не работает: 

$('#my_id').bind('result',function(){});

Любые предложения будут полезны.Я не хочу использовать .text (), так как он не удовлетворяет моим требованиям.Некоторая вещь, похожая на «результат», будет превосходной.

1 Ответ

0 голосов
/ 07 июня 2018

Существует 2 варианта.

A) Использовать обработчик событий выбрать из автозаполнение : 

$("#my_id").autocomplete({..., select: function(event, ui){...}});

B) Использовать обработчик событий autocompleteselect : 

$("#my_id").on("autocompleteselect", function(event, ui){...}});

В отладчике вы можете видеть, что событие в обоих случаях имеет один и тот же тип autocompleteselect.Оба подхода эквивалентны.Вы можете выбрать A, если вы предпочитаете хранить весь связанный код в одном блоке.Вы можете выбрать B, если вы предпочитаете строгое отделение заполнения списка автозаполнения от реакции на выделение.

Пример для A:

Введите 'a' или'j' в поле ввода, чтобы увидеть, как это работает. 

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 availableItems = [
        "ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
      ];
      $("#my_items").autocomplete({
        source: availableItems,
        select: function(event, ui) {
          alert(
            "input: " + event.target.value + "\n" +
            "label: " + ui.item.label + "\n" +
            "value: " + ui.item.value);
        }
      });
    });
  </script>
</head>

<body>

  <div class="ui-widget">
    <label for="my_items">Items: </label>
    <input id="my_items">
  </div>


</body>

</html>

Пример для B:

Введите 'a' или 'j' в поле ввода, чтобы увидеть, как оно работает. 

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 availableItems = [
        "ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
      ];
      $("#my_items").autocomplete({
        source: availableItems
      });

      $("#my_items").on("autocompleteselect", function(event, ui) {
          alert(
            "input: " + event.target.value + "\n" +
            "label: " + ui.item.label + "\n" +
            "value: " + ui.item.value);
      });

    });
  </script>
</head>

<body>

  <div class="ui-widget">
    <label for="my_items">Items: </label>
    <input id="my_items">
  </div>


</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...