it-roy-ru.com

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

у меня есть здесь код из 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>
13
user2805663

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

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

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

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

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

40
Arun P Johny

Чтобы ответить на вопрос в более общем плане, ответ:

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>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<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" />

19
Alain Tiemblo
$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('blur', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});
0
user1012506

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

(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
Chris Moschini