jquery - off - ¿Autocompletar no permitir la entrada de texto libre?

disable autocomplete javascript

Question

¿Es posible desautorizar la entrada de texto libre en el widget de autocompletar JQuery UI?

Por ejemplo, solo quiero que el usuario pueda seleccionar de la lista de elementos que se presentan en la lista de autocompletar, y no quiere que ellos puedan escribir texto aleatorio.

No vi nada en las demostraciones / documentos describiendo cómo hacer esto.

http://jqueryui.com/demos/autocomplete/

Estoy usando autocompletar de esta manera

$(''#selector'').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }

Answer 1

¿Qué pasa con la opción mustMatch?

''Si se establece en verdadero, el autocompletador solo permitirá resultados que sean presentados por el back-end. Tenga en cuenta que los valores ilegales dan como resultado un cuadro de entrada vacío.

Answer 2

De acuerdo con la documentación de la API , la propiedad ui del evento de change es nula si la entrada no se eligió de la lista, por lo que puede rechazar el texto libre de la siguiente manera:

change: function(event, ui) {
    if (ui.item == null) {
        $("#your_input_box").val("");
        $("#your_input_box").focus();
    }
}

Answer 3

La opción de cuadro combinado funciona bien si está utilizando una lista establecida, sin embargo, si tiene una lista generada dinámica a través de un json get, entonces solo puede capturar los datos en el cambio.

Ejemplo completo con parámetros adicionales a continuación.

        $("#town").autocomplete(
        {       
            select: function( event, ui ) {
                $( "#town" ).val( ui.item.value );
                return false;
            },        
            focus: function( event, ui ) {
                    $( "#town" ).val( ui.item.label );
                    return false;
                },           
            change: function(event, ui) {
                if (!ui.item) {
                    $("#town").val("");
                }
            },
            source: function(request, response) {
                $.ajax({
                    url: ''urltoscript.php'',
                    dataType: "json",
                    data: {
                        term : request.term,
                        country : $("#abox").val()    // extra parameters
                    },                        
                    success: function(data) {
                        response($.map(data,function (item)
                        {                                
                            return {
                                id: item.id,
                                value: item.name
                            };
                        }));
                    }
                });
            },
            minLength: 3
            , highlightItem: true                                
        });

Answer 4

Si desea que el usuario simplemente obtenga el elemento de la lista, utilice el cuadro combinado de autocompletar.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

Answer 5

Una forma sería usar validación adicional en el envío del formulario (si está utilizando un formulario) para resaltar un error si el texto no es una de las opciones válidas.

Otra forma sería adjuntar al evento de cambio de autocompletar que se activará incluso si no se seleccionan las opciones. Luego puede hacer la validación para asegurarse de que la entrada del usuario esté en su lista o mostrar un error si no es así.

Answer 6

Una vieja pregunta, pero aquí:

    var defaultVal = '''';
    $(''#selector'').autocomplete({
        source: url,
        minlength: 2,
        focus: function(event, ui) {
            if (ui != null) {
                defaultVal = ui.item.label;
            }
        },
        close: function(event, ui) {
            $(''#searchBox'').val(defaultVal);
        }
    });

Answer 7

Usé el módulo combobox que le da un botón de "flecha hacia abajo". Luego, a la etiqueta de entrada, solo agregue lo siguiente a la etiqueta de entrada justo alrededor de la línea 41 (dependiendo de su versión del combobox http://jqueryui.com/demos/autocomplete/#combobox )

input.attr ("readonly", "readonly");

A continuación, agregue el código para que, si el usuario hace clic en el cuadro de entrada, se muestre la lista desplegable.

Para mis propósitos, agregué un indicador de solo lectura que puedo pasar al módulo, así que si lo necesito solo de forma legible, puedo activarlo / desactivarlo también.