Estoy implementando jQuery UI Autocompletar y me pregunto si hay alguna forma de permitir solo una selección de los resultados sugeridos que se devuelven en lugar de permitir que se ingrese cualquier valor en el cuadro de texto.
Estoy usando esto para un sistema de etiquetado muy parecido al que se usa en este sitio, por lo que solo quiero permitir que los usuarios seleccionen etiquetas de una lista previamente completada que se devuelve al complemento de autocompletar.
También podrías usar esto:
change: function(event,ui){ $(this).val((ui.item ? ui.item.id : "")); }El único inconveniente que he visto en esto es que incluso si el usuario ingresa el valor total de un elemento aceptable, cuando mueve el foco del campo de texto, eliminará el valor y tendrá que hacerlo nuevamente. La única forma en que podrían ingresar un valor es seleccionándolo de la lista.
No sé si eso te importa o no.
Tengo el mismo problema con la selección no definida. Obtuve una solución y agregué la función toLowerCase , solo para estar seguro.
$('#' + specificInput).autocomplete({ create: function () { $(this).data('ui-autocomplete')._renderItem = function (ul, item) { $(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul); }; }, change: function( event, ui ){ var selfInput = $(this); //stores the input field if ( !ui.item ) { var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false; $('ul.for_' + specificInput).children("li").each(function() { if($(this).text().toLowerCase().match(writtenItem)) { this.selected = valid = true; selfInput.val($(this).text()); // shows the item's name from the autocomplete selfInput.next('span').text('(Existing)'); selfInput.data('id', $(this).data('id')); return false; } }); if (!valid) { selfInput.next('span').text('(New)'); selfInput.data('id', -1); } } }http://jsfiddle.net/pxfunc/j3AN7/
var validOptions = ["Bold", "Normal", "Default", "100", "200"] previousValue = ""; $('#ac').autocomplete({ autoFocus: true, source: validOptions }).keyup(function() { var isValid = false; for (i in validOptions) { if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { isValid = true; } } if (!isValid) { this.value = previousValue } else { previousValue = this.value; } });