Jquery flecha tecla de navegación

Question

tengo estas campo de texto y el menú desplegable de 'Facebook' como la autosugestión:

<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 para pasar el 'hover'state con tecla de flecha hacia abajo desde mi entrada "search_fld" a la primera 'display_box' y así sucesivamente para todos los divs de "visualización"?

aquí la jsFiddle: http://jsfiddle.net/MKZSE/

gracias Luca

Answer 1

No se puede emular el estado estacionario perfectamente .. no hay escape de la adición de la clase "real" con el mismo estilo:

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

ahora Este código será "naviage" 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); 
} 

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

Updated jsFiddle.

Answer 2

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

Answer 3

Claro que es feo. En el violín here.

<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 4

Para implementar campo de texto autosugestión, sería mejor utilizar la etiqueta 'lista de datos' de la siguiente manera:

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

obtener más detalles sobre lista de datos de etiquetas de aquí: http://www.w3schools.com/tags/tag_datalist.asp