Agregar valores a jQuery autocompletar en tiempo real

Question

Estoy haciendo una casilla de verificación de estilo "entrada de token" con autocompletar (el usuario escribe algo, selecciona una respuesta, que agrega un "token" a la vista de DOM).

Al utilizar autocompletar jQuery, ¿hay alguna forma de agregar valores que no están en la lista source después de que el usuario los ingrese?

Por ejemplo, una fuente se ve como ["Apples", "Oranges", "Bananas"]. El usuario escribe en "plums," cuando usa el campo de texto. ¿Hay alguna forma de agregar "ciruelas" a la lista de fuentes si el usuario así lo desea? Sé que hay eventos select y change que puedo verificar, pero select solo funciona si hay algo que seleccionar (no es en este caso), y change requeriría algún tipo de comprobación de tiempo de espera para verificar que el usuario haya dejado de escribir.

Por el contrario, ¿hay otro complemento que podría utilizar para llevar a cabo este comportamiento?

Answer 1

Esto debería funcionar bien con el evento de cambio autocomplete. Este código supone que hay un botón con id add que aparece cuando desea agregar un nuevo elemento a la lista. No aparecerá si el usuario selecciona un elemento de la lista. Hay algunos ajustes que se pueden hacer, pero esta prueba de concepto deben permitir:

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

He aquí un ejemplo: http://jsfiddle.net/rmGqB/

---

Actualización: suena como que poco entendido bien el requisito. También puede aprovechar el resultado de que autocompletar sería poblar la lista de candidatos con e impulsar la visibilidad del botón en función de si o no los resultados de la búsqueda produjo ningún coincidencias exactas:

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

Ejemplo:http://jsfiddle.net/VLLuJ/

Answer 2

La respuesta proporcionada por Andrew hace que el botón AGREGAR NUEVO permanezca, incluso si el usuario selecciona un elemento existente de la matriz en lugar de agregar "nuevo".

En lugar de incluir un botón para "agregar", hay una función incorporada de cambio dentro de autocompletar que se puede usar.

Aunque "Cambiar" espera hasta que el cuadro de texto pierda el foco, esta puede ser una mejor interfaz para mostrar el BOTÓN AGREGAR si no hay coincidencia con la matriz. (o podría crear una "confirmación" de adición).

Ver código alternativo que en realidad oculta el "botón Agregar" nuevamente si el usuario selecciona de la matriz. Algo qué solución de Andrew Whitaker no hace:

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

}); 

Ver mi violín revisada en acción - http://jsfiddle.net/VLLuJ/25/

Answer 3

vieja pregunta, pero la respuesta útil:

para actualizar el origen de autocompletar, utilice el colocador:

$ ("# auto").autocompletar ("opción", "fuente", ["Manzanas", "Naranjas", "Plátanos", "Ciruelas"]);

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