Autocompletar ¿no permite la entrada de texto libre?

Question

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

por ejemplo, solo quiero que el usuario tenga permiso para seleccionar de la lista de elementos que se presentan en la lista de autocompletar, y no quiere que puedan escribir texto aleatorio.

No vi nada en las demos/documentos que describan cómo hacerlo.

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

estoy usando autocompletar como esto

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

Answer 1

Una forma sería utilizar una validación adicional de envío de 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 disparará incluso si no se seleccionan 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 2

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

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

HTH

Answer 3

¿Qué ocurre con la opción mustMatch?

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

Answer 4

Utilicé 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 cuadro combinado http://jqueryui.com/demos/autocomplete/#combobox)

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

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

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

Answer 5

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 6

De acuerdo con la API documentation, propiedad del change del evento ui es nulo si la entrada no fue escogido de la lista, por lo que puede no permitir texto libre tan simple como esto:

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

Answer 7

La opción de cuadro combinado funciona bien si está utilizando una lista de temas, sin embargo, si usted tiene una lista generada por una dinámica a través de JSON llegar, a continuación, sólo se puede capturar los datos sobre el cambio.

Ejemplo completo con los 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         
     });