cara mendapatkan nilai item yang dipilih dalam pelengkapan otomatis

saya punya kode dari http://jqueryui.com/autocomplete/ ini bekerja sangat baik tetapi saya tidak dapat menemukan cara untuk mendapatkan nilai item yang dipilih dalam tampilan teks saya mencoba sesuatu seperti ini tetapi tidak berfungsi

<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>
Pemrograman
autocomplete jquery jquery-ui jquery-mobile
30 Oktober 2013 в 6:11
22 tayangan
Larutan

Ketika autocomplete mengubah nilai, ia menembakkan event autocompletechange, bukan event perubahan

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

Demo: [Fiddle][2]

Solusi lain adalah dengan menggunakan event pilih, karena event perubahan dipicu hanya ketika input kabur

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

Demo: [Fiddle][4]

Arun P Johny
Jawaban edit 30 Oktober 2013 в 6:21
Komentar (4)

Untuk menjawab pertanyaan secara lebih umum, jawabannya adalah:

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

Contoh lengkap:

$('#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" />
Komentar (2)

Saya menginginkan sesuatu yang cukup dekat dengan ini - saat pengguna memilih item, bahkan hanya dengan menekan tombol panah ke satu (fokus), saya ingin item data itu melekat pada tag yang dimaksud. Ketika mereka mengetik lagi tanpa memilih item lain, saya ingin data itu dihapus.

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

Dengan adanya ini, 'autocompleteselect' dan 'autocompletefocus' masih menyala tepat seperti yang Anda harapkan, tetapi item data lengkap yang dipilih selalu tersedia tepat di tag sebagai hasilnya. 'autocompleteclear' sekarang menyala ketika pilihan itu dihapus, umumnya dengan mengetik sesuatu yang lain.

Komentar (0)