Hapus bidang formulir setelah memilih untuk jQuery UI Autocomplete

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.

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

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

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
}

Ini bekerja dengan baik untuk saya.

Setelah acara tertentu, saya menggunakan perubahan acara.

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

Saya seorang pemula!

Coba ini

select: function (event, ui) {
    $(this).val('');
    return false;       
}

Saya baru saja menyelesaikannya dengan memaksa untuk kehilangan fokus:

$('#select_id').blur();
printResult();