Añadiendo valores a jQuery autocompletando en tiempo real.

Estoy haciendo una checkbox de estilo de “entrada de token” con un autocompletado (el usuario escribe algo, selecciona una respuesta, lo que agrega un “token” a la vista DOM).

Al usar jQuery autocompletar, ¿hay una manera de agregar valores que no estén en la lista de source después de que el usuario los escriba?

Por ejemplo, una fuente se parece a ["Apples", "Oranges", "Bananas"] . El usuario escribe "plums," cuando usa el campo de texto. ¿Hay una manera de agregar “Ciruelas” a la lista de fonts si el usuario lo desea? Sé que hay eventos de select y change que puedo verificar, pero la select solo funciona si hay algo para seleccionar (no existe en este caso), y el change requeriría algún tipo de verificación de tiempo de espera para verificar que el usuario haya dejado de escribir.

A la inversa, ¿hay otro complemento que pueda usar para lograr este comportamiento?

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

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

Aquí hay un ejemplo: http://jsfiddle.net/rmGqB/


Actualización: Parece que entendí mal el requisito. También puede aprovechar el resultado con el que el autocompletar completaría la lista de candidatos e impulsaría la visibilidad del botón según si los resultados de la búsqueda produjeron 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/

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 conmutador en el botón ‘agregar’, hay una función .change incorporada en autocompletar que se puede usar.

Aunque “Cambiar” espera hasta que el cuadro de texto pierda el foco, esta puede ser una mejor interfaz para luego mostrar el BOTÓN AÑADIR si no hay una coincidencia con la matriz. (o podría crear una “confirmación” de añadir).

Vea el código alternativo que en realidad oculta el “Botón Agregar” nuevamente si el usuario selecciona de la matriz. Algo que la 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 Fiddle revisado en acción – http://jsfiddle.net/VLLuJ/25/

Pregunta antigua, pero respuesta útil:

Para actualizar la fuente de autocompletado, use el setter:

$ (“# auto”). autocompletar (“opción”, “fuente”, [“Manzanas”, “Naranjas”, “Bananas”, “Ciruelas”));

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