Hapus bidang formulir setelah memilih untuk jQuery UI Autocomplete


97

Saya sedang mengembangkan formulir, dan menggunakan jQuery UI Autocomplete. Saat pengguna memilih opsi, saya ingin pilihan tersebut muncul dalam rentang yang ditambahkan ke induk<p> tag . Lalu saya ingin bidangnya kosong daripada diisi dengan pilihan.

Saya memiliki rentang yang tampak baik-baik saja, tetapi saya tidak bisa membersihkan lapangan.

Bagaimana Anda membatalkan tindakan pemilihan default jQuery UI Autocomplete?

Ini kode saya:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Melakukan $(this).val("");saja tidak akan berhasil. Yang menjengkelkan adalah bahwa hampir fungsi persisnya berfungsi dengan baik jika saya mengabaikan pelengkapan otomatis, dan hanya mengambil tindakan saat pengguna mengetikkan koma seperti:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Hasil akhir sebenarnya adalah membuat pelengkapan otomatis berfungsi dengan banyak pilihan. Jika ada yang punya saran untuk itu, mereka akan diterima.

Jawaban:


182

Tambahkan $(this).val(''); return false; ke akhir Andaselect fungsi untuk mengosongkan bidang dan membatalkan acara :)

Ini akan mencegah nilai diperbarui. Anda dapat melihat cara kerjanya di sekitar baris 109 di sini .

Kode di sana memeriksa salah secara khusus:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Fantastis! Aku merasa konyol. Sekarang saya tahu, dan mengetahui adalah setengah dari pertempuran.
Jon F Hancock

Itu memperbaikinya. Saya mencoba menerimanya, tetapi saya diberitahu saya tidak bisa selama 7 menit lagi. Diterima. Terima kasih.
Jon F Hancock

1
Izinkan saya menambahkan bahwa setelah Anda mengembalikan false, Anda tidak perlu lagi menetapkan nilainya sendiri (yaitu tidak perlu $(this).val('');)
Uri

9
Jika seseorang ingin bidang masukan bersih dari nilai apa pun, saya yakin panggilan ke .val('')harus tetap terjadi. Ini return false;hanya akan mencegah teks item yang dipilih muncul di kolom input.
Ryan

1
Uri salah dan Ryan benar. Anda harus mengembalikan false untuk mencegahnya memperbarui dengan pilihan Anda, dan Anda juga memerlukan $ (this) .val ('') jika ingin menghapusnya.
mynameistechno

19

Alih-alih mengembalikan false, Anda juga bisa menggunakan event.preventDefault ().

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

Saya menduga metode ini lebih efisien daripada jawaban yang diterima.
dlsso

6

return false diperlukan dalam callback pilih, untuk mengosongkan bidang. tetapi jika Anda ingin mengontrol kembali bidang tersebut, yaitu menetapkan nilainya, Anda harus memanggil fungsi baru untuk keluar dari ui.

Mungkin Anda memiliki nilai prompt seperti:

var promptText = "Enter a grocery item here."

Tetapkan sebagai nilai elemen. (fokus kami tetapkan ke '').

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

Hai, saya punya pertanyaan lain, tentang menyimpan prompt, saya tidak dapat menggunakan placeholder karena alasan teknis. Ini sempurna, TERIMA KASIH!
hgolov

5

Ini bekerja dengan baik untuk saya.

Setelah acara tertentu, saya menggunakan perubahan acara.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

Saya seorang pemula!



0

Saya baru saja menyelesaikannya dengan memaksa untuk kehilangan fokus:

$('#select_id').blur();
printResult();
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.