Aggiunta di valori al completamento automatico di jQuery in tempo reale

Question

Sto facendo una casella di controllo stile "input token" con un completamento automatico (l'utente digita qualcosa, seleziona una risposta, che aggiunge un "token" alla vista DOM).

Utilizzo del completamento automatico jQuery, esiste un modo per aggiungere valori non presenti nell'elenco source dopo che l'utente li ha immessi?

Ad esempio, una sorgente assomiglia a ["Apples", "Oranges", "Bananas"]. L'utente digita "plums," quando utilizza il campo di testo. C'è un modo per aggiungere "Prugne" alla lista delle fonti se l'utente lo desidera? So che ci sono eventi select e change che posso controllare, ma select funziona solo se c'è qualcosa da selezionare (non c'è in questo caso), e change richiederebbe un qualche tipo di controllo di timeout per verificare che l'utente avesse smesso di digitare.

Al contrario, c'è un altro plug-in che potrei usare per realizzare questo comportamento?

Answer 1

Ciò dovrebbe funzionare correttamente con l'evento di modifica di autocomplete. Questo codice presuppone l'esistenza di un pulsante con ID add visualizzato quando si desidera aggiungere un nuovo elemento all'elenco. Non verrà visualizzato se l'utente seleziona un elemento dall'elenco. Ci sono alcune modifiche che possono essere fatte, ma questo proof of concept dovrebbero permettere:

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

Ecco un esempio: http://jsfiddle.net/rmGqB/

---

Aggiornamento: suona come io un po 'frainteso il requisito. È anche possibile sfruttare il risultato che autocomplete sarebbe compilare l'elenco candidato e guidare la visibilità del pulsante sulla base o meno i risultati della ricerca ha prodotto alcun corrispondenze esatte:

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

Esempio:http://jsfiddle.net/VLLuJ/

Answer 2

La risposta fornita da Andrew fa sì che rimanga il pulsante AGGIUNGI NUOVO, anche se l'utente seleziona un elemento esistente dall'array invece di aggiungere "nuovo" !!!

Invece di includere un interruttore sul pulsante "aggiungi", è possibile utilizzare una funzione di scambio integrata all'interno del completamento automatico.

Sebbene "Cambia" attende fino a quando la casella di testo non viene messa a fuoco, questa può essere un'interfaccia migliore per visualizzare quindi il PULSANTE AGGIUNGI se non c'è corrispondenza con la matrice. (o potrebbe creare una "conferma" di aggiunta).

Vedere codice alternativo che nasconde di nuovo il "Pulsante Aggiungi" se l'utente seleziona dall'array. Qualcosa che la soluzione di Andrew Whitaker non fa:

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

}); 

Vedere la mia rivista Fiddle in azione - http://jsfiddle.net/VLLuJ/25/

Answer 3

vecchia questione, ma risposta utile:

per aggiornare l'origine di completamento automatico, usare il setter:

$ ("# auto").completamento automatico ("opzione", "fonte", ["Mele", "Arance", "Banane", "Prugne"]);

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