Değerleri jQuery otomatik tamamlama gerçek zamanlı olarak ekleme

Question

Otomatik tamamlama ile "jeton girişi" stili onay kutusu yapıyorum (kullanıcı türünde bir şeyler, DOM görünümüne bir "belirteç" ekleyen bir yanıt seçer).

jQuery otomatik tamamlamasını kullanarak, kullanıcı bunları girdikten sonra source listesinde olmayan değerleri eklemenin bir yolu var mı? Örneğin, bir kaynak ["Apples", "Oranges", "Bananas"]'a benziyor. Örneğin, bir kaynak ["Apples", "Oranges", "Bananas"] gibi görünüyor. Kullanıcı, metin alanını kullanırken "plums," içinde yazmaktadır. Kullanıcı istediği takdirde kaynak listesine "Erik" eklemenin bir yolu var mı? Kontrol edebileceğimiz select ve change olayları olduğunu biliyorum, ancak select sadece seçecek bir şey varsa çalışıyor (bu durumda yok) ve change kullanıcının yazmayı durdurduğunu doğrulamak için bir çeşit zaman aşımı kontrolü gerektiriyor. Tersi durumda, bu davranışı gerçekleştirmek için kullanabileceğim başka bir eklenti var mıdır?

Answer 1

Bu autocomplete değişiklikle çalışmalıdır. Bu kod, listeye yeni bir öğe eklemek istediğinizde görünen add numaralı bir düğmenin olduğunu varsayar. Kullanıcı listeden bir öğe seçerse görünmez. Orada yapılabilir bazı ince ayarlar, ancak kavramın bu kanıtı mümkün yapmalıdır:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

İşte bir örnek: http://jsfiddle.net/rmGqB/

---

Güncelleme: Biraz gereksinimi yanlış gibi geliyor. Ayrıca otomatik tamamlama ile aday listesini doldurmak edeceğini sonucu içine dokunun ve arama sonuçları herhangi kesin sonuç vermiştir olsun veya olmasın dayalı düğmeye görünürlüğünü sürebilirim:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

Örnek:http://jsfiddle.net/VLLuJ/

Answer 2

Andrew tarafından sağlanan cevap, kullanıcı "yeni" eklemek yerine diziden varolan bir öğeyi seçse bile YENİ EKLE düğmesine basılmasına neden olur !!!

'Ekle' düğmesine bir geçiş eklemek yerine, kullanılabilecek otomatik tamamlama içinde yerleşik bir .change işlevi vardır.

"Değiştir" metin kutusu odağı kaybedene kadar beklese de, bu, diziye bir eşleşme yoksa ADD BUTONU'nu göstermek için daha iyi bir arabirim olabilir. (ya da ekleme onaylamak).

Kullanıcı diziden seçtiğinde, "Ekle Düğmesi" ni gizleyen alternatif kodlara bakın. ayarlayıcı kullanın

otomatik tamamlama kaynağını güncellemek için:: -: Andrew Whitaker'in çözüm yapmaz şey http://jsfiddle.net/VLLuJ/25/

Answer 3

Eski soruya, ama yararlı cevap

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

eylem benim revize Fiddle görün

$ ("# auto").otomatik tamamlama ("seçenek", "kaynak", ["Elmalar", "Portakallar", "Muzlar", "Erikler"));

Bkz. http://api.jqueryui.com/autocomplete/#option-source