Jquery arrow key navigation

Question

Tengo estos campos de texto y menú desplegable para una autosugestión de ''Facebook'':

<input type="text" id="search" name="search_fld"/>

<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

mi CSS

.display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

¿Cómo puedo lograr pasar el estado ''hover'' con la tecla de la flecha hacia abajo desde mi entrada "search_fld" a la primera ''display_box'' y así sucesivamente para todos los divs de "visualización"?

aquí el jsfiddle : http://jsfiddle.net/MKZSE/

gracias Luca

Answer 1

Claro que es feo. En violín aquí .

<script src="jquery.js"></script>

<script>
$(function (){

        $(''.display_box'').hover(function (){            
            $(this).attr(''class'', ''display_box current'')
        }, function (){
            $(this).attr(''class'', ''display_box'');
        });

        $(''#search'').keyup(
            function (e){
                var curr = $(''#display'').find(''.current'');
                if (e.keyCode == 40) 
                {                                   
                    if(curr.length)
                    {
                            $(curr).attr(''class'', ''display_box'');
                            $(curr).next().attr(''class'', ''display_box current'');
                    }
                    else{
                        $(''#display div:first-child'').attr(''class'', ''display_box current'');
                    }                   
                }
                if(e.keyCode==38)
                {                                       
                    if(curr.length)
                    {                           
                            $(curr).attr(''class'', ''display_box'');
                            $(curr).prev().attr(''class'', ''display_box current'');
                    }
                    else{
                        $(''#display div:last-child'').attr(''class'', ''display_box current'');
                    }           
                }
            }       
        )

    });
</script>
<style>
.current{
  background:#3b5998;
  color:#FFFFFF;
}
</style>

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

Answer 2

No se puede emular el estado de vuelo estacionario a la perfección ... no hay escapatoria para agregar clases "reales" con el mismo estilo:

.display_box_hover, .display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

Ahora este código "transformará" los elementos:

window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

Esto "recordará" el índice del último elemento "seleccionado" y cambiará al elemento siguiente o anterior, utilizando la función eq() y agregando la clase de arriba a ese elemento seleccionado.

JsFiddle actualizado .

Answer 3

puede usar una tecla de flecha como fondo de campo de entrada usando css / usar un tramo de superposición sobre el campo de entrada con la imagen de flecha de fondo y hacer que sea visible en estado de desplazamiento usando css o js

Answer 4

Para implementar el campo de texto de autosugestión, sería mejor usar la etiqueta ''datalist'' como se muestra a continuación:

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>

Obtenga más detalles sobre la etiqueta de datalist desde aquí: http://www.w3schools.com/tags/tag_datalist.asp