JQuery UI Autocomplete'i seçtikten sonra form alanını temizleyin

Bir form geliştiriyorum ve jQuery UI Autocomplete kullanıyorum. Kullanıcı bir seçenek belirlediğinde, seçimin üst <p>etikete eklenen bir aralıkta açılmasını istiyorum . Ardından, seçimle doldurulmak yerine alanın temizlenmesini istiyorum.

Açıklık gayet iyi görünüyor ama alanı temizleyemiyorum.

JQuery UI Autocomplete'in varsayılan seçme eylemini nasıl iptal edersiniz?

İşte kodum:

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

Basitçe yapmak $(this).val("");işe yaramıyor. Çıldırtıcı olan, otomatik tamamlamayı göz ardı edersem ve kullanıcı virgül yazdığında hemen harekete geçersem neredeyse tam işlevin düzgün çalışması:

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

Gerçek sonuç, otomatik tamamlamanın birden çok seçimle çalışmasıdır. Herhangi birinin bunun için herhangi bir önerisi varsa, memnuniyetle karşılanacaktır.

Alanı temizlemek ve etkinliği iptal etmek $(this).val(''); return false; için selectişlevinizin sonuna ekleyin :)

Bu, değerin güncellenmesini engelleyecektir. 109. satırda nasıl çalıştığını burada görebilirsiniz .

Buradaki kod özellikle yanlış olup olmadığını kontrol eder:

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

False döndürmek yerine event.preventDefault () öğesini de kullanabilirsiniz.

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

alanı boşaltmak için seçili geri aramada yanlış döndürmek gerekir. ancak alanı yeniden kontrol etmek, yani değeri ayarlamak istiyorsanız, kullanıcı arayüzünden çıkmak için yeni bir işlev çağırmanız gerekir.

Belki de aşağıdaki gibi bir anlık değeriniz vardır:

var promptText = "Enter a grocery item here."

Bunu elementin değeri olarak ayarlayın. (odakta '' olarak ayarladık).

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

Benim için iyi çalışıyor.

Olay seçtikten sonra olay değişikliği kullandım.

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

Acemiyim!

Bunu dene

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

Odağı kaybetmeye zorlayarak çözdüm.

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