Es posible para no permitir la libre entrada de texto en la interfaz de usuario JQuery autocomplete widget?

por ejemplo, solo quiero que el usuario podrá seleccionar de la lista de elementos que se presentan en la lista de autocompletar, y no quiero que ellos sean capaces de escribir algún texto al azar.

Yo no veo nada en las demos/docs con la descripción de cómo hacer esto.

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

Estoy usando la función autocompletar como este

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        //etc
    }
InformationsquelleAutor JK. | 2010-05-25

7 Comentarios

  1. 3

    Una forma sería la de utilizar la validación adicional en el formulario de envío (si está utilizando un formulario) para resaltar un error si el texto no es uno de la opción válida.

    Otra manera sería adjuntar a la auto completo del evento de cambio que serán despedidos, incluso si una opción no está seleccionada. A continuación, puede hacer la validación para asegurar la entrada de usuario en la lista o mostrar un mensaje de error si no lo es.

    • Me fui con el .cambiar() el evento, era más fácil y más rápido que intentar cambiar el combobox solución que se ajuste.
    • señaló a continuación otra respuesta, que trabajó como un encanto cambio: function(event,ui) { if (interfaz de usuario.item==null) { $(«#your_input_box»).val(«); $(«#your_input_box»).focus(); } }
  2. 79

    De acuerdo a la La documentación de la API, el change del evento ui propiedad es null si la entrada no fue elegido de la lista, así que usted puede no permitir la libre texto tan simple como esta:

    change: function(event, ui) {
        if (ui.item == null) {
            $("#your_input_box").val("");
            $("#your_input_box").focus();
        }
    }
    • Trabajó para mí, uno agradable 🙂
    • Trabajó para mí también 😉
    • change: (e, ui) -> ($ '#input_box').val('').focus() if not ui.item para la Coffeescripters.
    • event.currentTarget.value = ''; event.currentTarget.focus(); los casos donde esto no iba a funcionar?
    • A mí me funcionó. Muchas gracias.
    • Mejor respuesta esta es la forma correcta de manipulación.
    • funciona perfecto. en cambio autocompletar si no es elemento del conjunto seleccionado de val para nada. sus ok
    • Debe ser aceptado por la respuesta! Yo sugeriría $(this).val(""); $(this).focus();

  3. 10

    Si desea que el usuario acaba de obtener el elemento de la lista, a continuación, utilizar la función autocompletar combobox.

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

    HTH

    • Todavía puede escribir en el, que es exactamente lo que él dijo que él no quiere.
    • No, yo No creo que él quiere que. Yo creo que él quiere llegar desde el elemento de la lista, es decir, si el usuario comienza a escribir «Ja», a continuación, si figura en la lista de «Java» y «Javascript» entonces él quiere que el usuario los seleccione uno de ellos y no del tipo «Jab» y enviar.
    • No me dijo de autocompletar, lo que implica escribir es permitido. Pero la escritura debe ser restringido sólo a los elementos en la lista de autocompletar. El combobox ejemplo hace exactamente eso.
    • Combobox funcionalmente es perfecto, pero la interfaz de usuario es mala – se ve muy diferente de la estándar de la < seleccione >, por lo que no los puedo usar. Voy a mirar el ejemplo en más detalle para ver si el botón desplegable se puede dejar fuera.
    • Yo soy el único que entendió mal lo que él quería en ese entonces. Hizo una irrelevante editar a esta respuesta para que yo pudiera tener de vuelta a mi downvote.
  4. 0

    He utilizado el combobox módulo en el cual se da una «flecha abajo» botón. Luego a la de la etiqueta de entrada, sólo tiene que añadir el siguiente al de la etiqueta de entrada a la derecha, alrededor de la línea 41 (dependiendo de la versión de la combobox http://jqueryui.com/demos/autocomplete/#combobox )

    de entrada.attr(«readonly», «readonly»);

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

    Para mis propósitos, he añadido un readonly bandera que me puede pasar en el módulo de modo que si la necesito readonly, me puede encender/apagar así.

  5. 0

    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);
            }
        });
  6. 0

    Si quieres restringir al usuario escoger una recomendación de la lista de autocompletar, tratar de definir la función cerrar como este. El cierre de la función se llama cuando los resultados desplegable cierra, si el usuario selecciona de la lista, entonces evento.currentTarget se define, si no, a continuación, los resultados desplegable cerrada, sin que el usuario seleccione una opción. Si no selecciona una opción, a continuación, reiniciar la entrada en blanco.

    /**
     * The jQuery UI plugin autocomplete
     */
    $.widget( "ui.autocomplete", $.ui.autocomplete, {
       options: {
          close: function( event, ui ) {
             if (typeof event.currentTarget == 'undefined') {
                $(this).val("");
             }
          }
       }
     });
    • Mientras este fragmento de código puede ser la solución, incluyendo una explicación realmente ayuda a mejorar la calidad de tu post. Recuerde que usted está respondiendo a la pregunta para los lectores en el futuro, y esas personas pueden no saber las razones de su sugerencia de código.
    • En este ejemplo en particular, extiendo la función de autocompletar ui widget para comportarse de esa manera, así que no tenemos que fijar en cada lugar que se produce en mi aplicación. Si sólo tiene unos pocos, a continuación, defina la función cerrar y no se molestan ampliar el widget
  7. -1

    El combobox opción funciona bien si usted está usando un juego de la lista, sin embargo, si usted tiene una dinámica de lista que se genera a través de un json obtener, a continuación, sólo se pueden capturar los datos sobre 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                                
            });

Dejar respuesta

Please enter your comment!
Please enter your name here