jQuery UI Autocompletar: permitir únicamente un valor de la lista sugerida

Question

Me estoy poniendo en práctica jQuery UI autocompletar y me pregunto si hay alguna manera de permitir sólo una selección de la sugirió resultados que se devuelven en lugar de permitir cualquier valor para ser ingresado 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 poblada devuelta al complemento de autocompletar.

Answer 1

Tengo el mismo problema con la selección no definida. Lo resolvió y agregó 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); 
     } 
    } 
} 

Answer 2

Usted podría también utilizar esto:

change: function(event,ui){ 
    $(this).val((ui.item ? ui.item.id : "")); 
} 

El único inconveniente que he visto a esto es que incluso si el usuario introduce el valor total de un artículo aceptable, cuando se mueven desde el enfoque textfield eliminará el valor y tendrán que hacerlo de nuevo. La única forma en que podrían ingresar un valor es seleccionándolo de la lista.

No sé si eso es importante para usted o no.

Answer 3

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

Answer 4

Esta es la forma en que lo hice con una lista de los asentamientos:

$("#settlement").autocomplete({ 
    source:settlements, 
    change: function(event, ui) { 
    val = $(this).val(); 
    exists = $.inArray(val,settlements); 
    if (exists<0) { 
    $(this).val(""); 
    return false; 
    } 
} 
}); 

Answer 5

i basta con modificar el código en mi caso & que está funcionando

selectFirst: true, 
change: function (event, ui) { 
     if (ui.item == null){ 
     //here is null if entered value is not match in suggestion list 
      $(this).val((ui.item ? ui.item.id : "")); 
     } 
    } 

se puede intentar

Answer 6

Con sencilla jQuery, utilizar el evento focusout:

Por ejemplo:

$("#input").focusout(function(){ 

}); 

Entonces: obtener el texto con $("#input").val() y comprobar si la palabra es de acuerdo con la matriz. Si NO limpie la entrada: $("#input").val('');

Answer 7

Estoy en Drupal 7.38 y para permitir sólo el aporte de select-box en autocompletar sólo tiene que borrar la entrada de usuario en el punto, donde js no necesita es más - que es el caso, tan pronto como las de resultados de búsqueda llegan a la sugerencia emergente allí mismo se puede establecer Savely:

**this.input.value = ''** 

ver a continuación en el extracto de autocomplete.js ... Así que copié todo el objeto Drupal.jsAC.prototype.found en mi módulo personalizado y lo añadió a la forma deseada con

$form['#attached']['js'][] = array(
    'type' => 'file', 
    'data' => 'sites/all/modules/<modulname>_autocomplete.js', 
); 

Y aquí está el extracto de Drupal originales de misc/autocompletar.js modificado por esa sola línea ...

Drupal.jsAC.prototype.found = function (matches) { 
    // If no value in the textfield, do not show the popup. 
    if (!this.input.value.length) { 
    return false; 
    } 
    // === just added one single line below === 
    this.input.value = ''; 

    // Prepare matches. 

= corte. . . . . .