JQuery UI autocompletar - Ocultar lista después de ingresar enter

Question

Tengo una entrada. Uso el autocompletado de Jquery UI para proponer sugerencias al usuario. Permite imagen Tengo en mi lista 3 elementos: item1, item2, item3. Lo que estoy buscando es que la lista se cierre cuando el usuario acceda a ingresar. Por ejemplo, si el usuario solo ingresa "it", se mostrarán los 3 elementos. En ese caso, si acierta, me gustaría que la lista se cierre. 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

$(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/

Answer 2

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

Avíseme si tiene alguna pregunta.

La magia es vinculante el método close autocompletar para pulsación de tecla

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

ACTUALIZACIÓN

$("#search").keypress(function(e){ une pulsación de tecla del elemento #search a la función especificada, pasando el objeto 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 de código de evento es igual a la tecla 'enter'. Para obtener una lista de códigos de tecla válidos, see here.

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

Answer 3

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

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

Este es un truco sencillo para almacenar si se muestra o no la función de autocompletar como un valor lógico. (Estoy usando setTimeOut para crear el escenario en el que hay una espera, no es el escenario de la solución problema.)

shouldComplete = true; 

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

Luego, cuando el botón se pulsa enter, el indicador se establece en false. 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 hacer esto con más elegancia estoy seguro, pero esto no resuelve el problema que puede aparecer más tarde en la caída hacia abajo.

Answer 4

Me encontré con este problema y no pude usar el método close() porque mi autocompletado se estaba re-renderizando en cada carga de una vista Backbone.Como tal, se agregó un nuevo elemento de autocompletar al DOM y aquellos se quedaron atascados aunque el elemento de entrada adjunto se fue volando y se volvió a crear. Los elementos de autocompletar superfluos estaban causando algunos problemas, pero lo peor fue cuando el usuario pulsa ENTER con la suficiente rapidez, me gustaría ir a través de esta secuencia: texto

1. tipos de usuario
2. Solicitud de sugerencias comienza la ejecución
3. El se activa el evento de pulsación de tecla y ejecuta una búsqueda de texto completo (el usuario no seleccionó nada de autocompletar)
4. La vista se vuelve a cargar, el campo de entrada y otros elementos se vuelven a renderizar y se agrega un nuevo elemento de autocompletar al final del DOM
5. The ori La solicitud final de sugerencias regresa con una respuesta y se muestran las sugerencias.

Tenga en cuenta que las sugerencias mostradas en el paso 5 ahora están vinculadas a un contenedor de autocompletar que ya no está asociado con mi campo de entrada, por lo que los eventos como presionar esc o hacer clic en cualquier otro lugar en la pantalla no harán nada. Las sugerencias quedan bloqueadas hasta que se produce una recarga completa de la página.

Terminé arreglando esto almacenando el elemento principal de contenedor del elemento de autocompletar creado más recientemente y quitándolo manualmente.

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

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