Autocompletar Jquery: usar la pestaña para seleccionar el primer elemento y permanecer enfocado en el cuadro de búsqueda

Cuando utilizo el autocompletado de la interfaz de usuario de JQuery, necesito que la tecla de tabulación complete el cuadro de búsqueda con el primer elemento en los resultados del autocompletado, incluya un espacio después y luego permita que el usuario continúe escribiendo.

<div class="ui-widget">
  <form id="searchbox" method="GET" action="http://duckduckgo.com/">
    <input id="search" type="text" name="q">
    <input id="submit" type="submit" value="Search">
  </form>
</div>
<script>
var tabKey = 9;
$('#search').autocomplete({
    source: [ 'this', 'that', 'foobar' ],
    delay: 0,
    selectFirst: true,
    select: function(event, ui) { if (event.keyCode == tabKey) { 
      $('#search').focus().select();
    } }
});
// without this, the tab key doesn't trigger an event                                                                                       
$('.ui-autocomplete').keypress(function(event) {});
</script>

En otras palabras, en el ejemplo anterior, si alguien escribiera "th", vería "esto" y "aquello" en las opciones de autocompletar. Presionar la pestaña agregaría "esto" (tenga en cuenta el espacio) a la entrada y el foco permanecería en la entrada.

¿Puede alguien darme un puntero en cuanto a lo que me he perdido? No sé Javascript muy bien, así que las palabras pequeñas son buenas :)

Y quizás información más útil (jquery 1.7.2) de la sección HEAD:

<script src="js/jquery-latest.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" /> 

Editar: Parece que autoFocus: true me llevará a la mitad allí. Ahora, si puedo averiguar cómo mantener el foco en el cuadro de entrada.

preguntado el 03 de mayo de 12 a las 08:05

3 Respuestas

Hiya manifestación http://jsfiddle.net/DMDHC/

Espero que esto ayude, :)

Así que si escribes Ra verá rambo y otras opciones apareciendo y luego presione tab tecla y verás que added text + " " aparecerá con el foco en el cuadro de texto para que pueda seguir escribiendo.

Otra cosa que hice es event.preventDefault(); lo que evitará cualquier comportamiento predeterminado, ¡descansa, ya sabes lo que estás haciendo, hermano! B-)

código jquery

$( "#search" ).autocomplete({
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    },
        select: function(event, ui) {

             var TABKEY = 9;
            this.value = ui.item.value;

            if (event.keyCode == TABKEY) { 
                event.preventDefault();
                this.value = this.value + " ";
                $('#search').focus();
            }

            return false;
        }
});

​

Respondido 21 ago 17, 02:08

Eso es perfecto. Tuve que hacer algunos ajustes y ahora es exactamente lo que necesitaba. Gracias :) - Ovidio

@Ovid me alegro de que haya ayudado! Cuando quieras hermano! ¡tener una buena! Cheerios. - Tats_innit

Yo uso esto (coffeescript):

$("#autocomplete").keydown (event) ->
    if event.keyCode != $.ui.keyCode.TAB then return true
    $(this).trigger($.Event 'keydown', keyCode: $.ui.keyCode.DOWN)
    false

contestado el 01 de mayo de 16 a las 00:05

El enfoque automático seleccionará el primer registro en la búsqueda desplegable...

Su código entonces solo necesitaría incluir autoFocus: true, como abajo:

$('#search').autocomplete({
    source: url,
    delay: 0,
    autoFocus: true,
    select: function( event, ui ) {
        $( "#id" ).val( ui.item.id );
        $(this).closest('form').submit();
    },
    focus: function( event, ui ) { event.preventDefault(); }
});

Respondido 01 Jul 20, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.