web-dev-qa-db-ja.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>
jqueryjquery-uijquery-mobileautocomplete
13
user2805663

オートコンプリートが値を変更すると、changeイベントではなく autocompletechange イベントが発生します

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

デモ： フィドル

別の解決策は select eventを使用することです。これは、入力がぼやけている場合にのみchangeイベントがトリガーされるためです

$(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);
    });
});

デモ： フィドル

42
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" />
20
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

これにかなり近いものが欲しかった-ユーザーがアイテムを選ぶ瞬間に、矢印キーを1つ（フォーカス）を押すだけでも、そのデータアイテムを問題のタグに添付したい。別のアイテムを選択せず​​に再度入力すると、そのデータがクリアされます。

(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