как получить значение выбранного элемента в автозаполнении

У меня есть код с http://jqueryui.com/autocomplete/ он работает очень хорошо, но я не могу найти способ получить значение выбранного элемента в текстовом представлении я пробовал что-то вроде этого, но это не работает

<script>
$(document).ready(function () {
    $('#tags').change(function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});
</script>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <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>
<script>
$(document).ready(function () {
    $('#tags').change(function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
  <div id="tagsname"></div>
</div>

</body>
</html>
Программирование
autocomplete jquery jquery-ui jquery-mobile
30-го октября 2013 в 6:11
25 просмотров
Решение

Когда автозаполнение изменяет значение, оно запускает событие autocompletechange, а не событие change

$(document).ready(function () {
    $('#tags').on('autocompletechange change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});

Демонстрация: [Fiddle][2]

Другим решением является использование события select, поскольку событие изменения срабатывает только при размытии входа

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

Демонстрация: [Fiddle][4]

Arun P Johny
Редактировал ответ 30-го октября 2013 в 6:21
Комментарии (4)

Если отвечать на вопрос более широко, то ответ таков:

select: function( event , ui ) {
    alert( "You selected: " + ui.item.label );
}

Полный пример:

$('#test').each(function(i, el) {
    var that = $(el);
    that.autocomplete({
        source: ['apple','banana','orange'],
        select: function( event , ui ) {
            alert( "You selected: " + ui.item.label );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Type a fruit here: <input type="text" id="test" />
Комментарии (2)

Я хотел получить нечто близкое к этому - в тот момент, когда пользователь выбирает элемент, даже просто нажимая клавиши со стрелками (фокус), я хочу, чтобы этот элемент данных был прикреплен к данному тегу. Когда пользователь снова набирает текст, не выбрав другой элемент, я хочу, чтобы эти данные были удалены.

(function() {
    var lastText = '';

    $('#MyTextBox'), {
        source: MyData
    })
    .on('autocompleteselect autocompletefocus', function(ev, ui) {
        lastText = ui.item.label;
        jqTag.data('autocomplete-item', ui.item);
    })
    .keyup(function(ev) {
        if (lastText != jqTag.val()) {
            // Clear when they stop typing
            jqTag.data('autocomplete-item', null);

            // Pass the event on as autocompleteclear so callers can listen for select/clear
            var clearEv = $.extend({}, ev, { type: 'autocompleteclear' });
            return jqTag.trigger(clearEv);
    });
})();

В этом случае 'autocompleteselect' и 'autocompletefocus' по-прежнему срабатывают, когда вы ожидаете, но полный элемент данных, который был выбран, всегда доступен прямо на теге. 'autocompleteclear' теперь срабатывает, когда этот выбор снимается, обычно при вводе чего-то другого.

Комментарии (0)