javascript - ejemplo - jquery ui autocomplete

jQuery UI Autocompletar: solo permite el valor seleccionado de la lista sugerida

Question

Estoy implementando Autocompletar de jQuery UI y me pregunto si hay alguna manera 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 las etiquetas de una lista previamente poblada que se devuelve al complemento de autocompletar.

Answer 1

Presentación y manejo de Ajax

Esto será útil para algunos de ustedes:

$(''#INPUT_ID'').autocomplete({
    source: function (request, response) {
        $.ajax({
            type: ''POST'',
            contentType: ''application/json; charset=utf-8'',
            url: autocompleteURL,
            data: "{''data'':''" + $(''INPUT_ID'').val() + "''}",
            dataType: ''json'',
            success: function (data) {
                response(data.d);
            },
            error: function (data) {
                console.log(''No match.'')
            }
        });
    },
    change: function (event, ui) {
        var opt = $(this).val();

        $.ajax({
            type: ''POST'',
            contentType: ''application/json; charset=utf-8'',
            url: autocompleteURL,
            data: "{''empName'':''" + name + "''}",
            dataType: ''json'',
            success: function (data) {
                if (data.d.length == 0) {
                    $(''#INPUT_ID'').val('''');
                    alert(''Option must be selected from the list.'');
                } else if (data.d[0] != opt) {
                    $(''#INPUT_ID'').val('''');
                    alert(''Option must be selected from the list.'');
                }
            },
            error: function (data) {
                $(this).val('''');
                console.log(''Error retrieving options.'');
            }
        });
    }
});

Answer 2

Acabo de modificar el código en mi caso y 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 : ""));
        }
    }

puedes probar

Answer 3

Así es como lo hice con una lista de asentamientos:

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

Answer 4

Estoy en drupal 7.38 y para permitir solo la entrada de select-box en autocompletar solo necesita eliminar la entrada de usuario en el punto, donde js ya no la necesita más - que es el caso, tan pronto como la búsqueda- los resultados llegan a la sugerencia-ventana emergente que puedes configurar de manera segura:

 **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 agregué al formulario deseado con

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

Y aquí está el extracto de misc / autocomplete.js original de Drupal modificado por esa única 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.

= cortar . . . . .

Answer 5

También puedes usar esto:

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

El único inconveniente que he visto es que incluso si el usuario ingresa el valor completo de un artículo aceptable, cuando mueve el foco del campo de texto, eliminará el valor y tendrá que volver a hacerlo. La única forma en que podrían ingresar un valor es seleccionándolo de la lista.

No sé si eso te importa o no.

Answer 6

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 7

Tengo el mismo problema con los seleccionados no definidos. Lo toLowerCase 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); 
        }
    }
}