ejemplo - JQuery UI autocompletar-Ocultar la lista después de ingresar

jquery combobox

Question

Tengo una entrada. Uso el autocompletado de la interfaz de usuario de Jquery para proponer sugerencias al usuario. Permite la imagen que tengo en mi lista 3 artículos: item1, item2, item3. Lo que estoy buscando es la lista que se cerrará cuando el usuario haga clic en entrar. Por ejemplo, si el usuario solo ingresa "it", se mostrarán los 3 elementos. En ese caso, si pulsa enter, me gustaría que se cerrara la lista. No logro encontrar una solución para eso. Espero que alguien pueda ayudar. Aclamaciones. Bagazo.

http://jsfiddle.net/vXMDR/

Mi html:

<input id="search" type="input" />​

Mis js

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});​

Answer 1

Aquí está la solución: http://jsfiddle.net/vXMDR/3/

Si tienes preguntas, déjamelo saber.

La magia es vincular el método de cierre autocompletado para presionar teclas

 $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == ''13''){
      $(''#search'').autocomplete(''close'');
      return false;
    }
  });

ACTUALIZAR

$("#search").keypress(function(e){ liga la pulsación del elemento #search a la función especificada, pasando el objeto del event . También puede escribir esto como $("#search").on(''keypress'', function(e) {...

if (!e) e = window.event; asegura que si no se pasó un evento válido, establece e en el objeto window.event actual.

Finalmente, if (e.keyCode == ''13''){ prueba que el valor del código de clave del evento es igual a la tecla ''enter''. Para obtener una lista de los códigos clave válidos, consulte aquí .

Aquí está la documentación para el método de cierre autocompletado: docs.jquery.com/UI/Autocomplete#method-close

Answer 2

He modificado aún más la solución de shanabus, para permitir el retraso debido a la devolución de llamada.

http://jsfiddle.net/vXMDR/46/

Este es un truco simple para almacenar si se muestra o no el autocompletado como un valor booleano. (Estoy usando setTimeOut para crear el escenario donde hay una espera, es el escenario problema, no la solución).

shouldComplete = true;

$("#search").autocomplete({
    source:function (request, response) {            
        setTimeout(
            function() {
                response(shouldComplete ? availableTags : null);
            },
            2000);
    }        
    ,
    minLength: 0
    });

Luego, cuando se presiona el botón Intro, la bandera se establece en falso. Cualquier otra tecla reactiva la bandera.

$("#search").keypress(function(e){
    if (!e) e = window.event;   
    if (e.keyCode == ''13''){
      $(''#search'').autocomplete(''close'');
        shouldComplete = false;
      return false;
    }
        else
        {
            shouldComplete = true;
        }
  });

Es posible hacerlo de manera más elegante, estoy seguro, pero esto resuelve el problema de que el menú desplegable podría aparecer más adelante.

Answer 3

Me encontré con este problema y no pude usar el método close () porque mi autocompletado se estaba representando en cada carga de una vista Backbone. Como tal, se agregó un nuevo elemento de autocompletado al DOM y aquellos que se quedaron atascados a pesar de que el elemento de entrada adjunto se estaba soplando y recreado. Los elementos autocompletados superfluos estaban causando algunos problemas, pero lo peor era que cuando el usuario presionaba entrar rápidamente, pasaría por esta secuencia:

1. Tipos de usuario de texto
2. La solicitud de sugerencias comienza su ejecución.
3. El evento de pulsación de tecla se activa y ejecuta una búsqueda de texto completo (el usuario no seleccionó algo de autocompletar)
4. La vista se vuelve a cargar, el campo de entrada y otros elementos se vuelven a representar y se agrega un nuevo elemento de autocompletado al final del DOM
5. La solicitud original de sugerencias se devuelve con una respuesta y se muestran las sugerencias.

Tenga en cuenta que las sugerencias que se muestran en el paso 5 ahora están vinculadas a un contenedor autocompletado que ya no está asociado con mi campo de entrada, por lo que cualquier evento como presionar esc o hacer clic en otra parte de la pantalla no hará nada. Las sugerencias se atascan allí hasta que se produce una recarga completa de la página.

Terminé solucionando esto almacenando mainContainerId del elemento autocompletado creado más recientemente y eliminándolo manualmente.

// during rendering
self.currentAutoComplete = $("#input-element").autocomplete({
  // set options
});

// later
if (this.currentAutoComplete) {
  $("#" + this.currentAutoComplete.mainContainerId).remove();
}

Answer 4

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
    }).keyup(function (e) {
        if(e.which === 13) {
            $(".ui-menu-item").hide();
        }            
    });
});​

http://jsfiddle.net/vXMDR/2/