facebook como la búsqueda ajax - cómo ir a través de los resultados usando el teclado

Question

Im tratando de implementar un facebook como la búsqueda que devolverá resultados mientras el usuario está escribiendo (autocompletar), aquí está el código jQuery que estoy utilizando:

$(document).ready(function(){ 
    $("#searchField").keyup(function() 
    { 
     var searchbox = $(this).val(); 
      if(searchbox=='') 
      { 
      $("#searchDisplay").html('').hide(); 
      } 
      else 
      { 
       $.ajax({ 
       url: "ajax/?do=search_users&q="+ searchbox+"", 
       //data: dataString, 
       cache: false, 
        success: function(html) 
        { 
         $("#searchDisplay").html(html).show(); 
        } 
       }); 
      }return false;  
    }); 
}); 

$("#searchField").focusout(function(){ 
    $("#searchDisplay").slideUp(); 
}); 

$("#searchField").focus(function(){ 
    if($("#searchDisplay").html() != ''){ 
     $("#searchDisplay").slideDown(); 
    } 
}); 

El resultado de la devolución está en la estructura div. Lo que no sé cómo hacer es permitir que los usuarios realicen los resultados usando las teclas [ARRIBA] y [ABAJO] en el teclado y elegir el resultado presionando el botón [ENTER].

INFORMACIÓN ADICIONAL

aquí es el display_box:

<div id="searchDisplay"> 
       echo '<a href="'.$_config['http'].$username.'"><div class="display_box" align="left">'; 
       echo '<img src="'.$img.'" style="width:25px; float:left; margin-right:6px" />'; 
       echo $name.'<br/>'; 
       echo '<span style="font-size:9px; color:#999999">'.$username.'</span></div></a>'; 
</div> 

EL Formato HTML

<a href="ahoora"><div class="display_box" align="left"> 
    <img src="http://domain.com/upload/thumbs/ahoora_1336145552.jpg" style="width:25px; float:left; margin-right:6px"> 
<strong>a</strong>hour<strong>a</strong><br> 
<span style="font-size:9px; color:#999999"><strong>a</strong>hoor<strong>a</strong></span> 
</div></a> 

cada resultado tiene el código HTML anterior, y lo único que se cargan en a <div> con el id=searchDisplay.

* tenga en cuenta que la parte del eco php tiene un ciclo while, el código anterior es solo la idea de cómo es el html (el searchDisplay no está en la misma página que el resultado, verifique el código jquery).

Answer 1

Prueba este código ... he encontrado de mi colección de marcadores

http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html

Answer 2

Hay un plugin de jQuery que permite a unirse a la acción shortcurs teclado. Lo he utilizado para navegar por una lista de elementos con las teclas de cursor:

https://github.com/jeresig/jquery.hotkeys

Definición de una tecla de acceso directo con el plugin es tan simple como eso:

$(document).bind('keydown', 'ctrl+a', fn); 

Answer 3

probar esto. Se desplaza por la lista y regresa a la parte superior/inferior cuando pasa el principio/final.

<script type="text/javascript"> 
<!-- 
$(document).ready(function() { 
    $("#searchbox").on("keydown",handleKeys); 
}); 
function handleKeys(e) { 

    var keyCode=e.keyCode? e.keyCode : e.charCode; 
    if (keyCode==40 && $("a.activeoption").length==0) { 
     $("a").eq(0).addClass("activeoption"); 
    } else if (keyCode==40 && $("a.activeoption").length!=0) { 
     $("a.activeoption").next().addClass("activeoption"); 
     $("a.activeoption").eq(0).removeClass("activeoption"); 
     if ($("a.activeoption").length==0) 
      $("a").eq(0).addClass("activeoption"); 
    } else if (keyCode==38 && $("a.activeoption").length==0) { 
     $("a").last().addClass("activeoption"); 
    } else if (keyCode==38 && $("a.activeoption").length!=0) { 
     var toSelect=$("a.activeoption").prev("a"); 
     $("a.activeoption").eq(0).removeClass("activeoption"); 
     toSelect.addClass("activeoption"); 
     if ($("a.activeoption").length==0) 
      $("a").last().addClass("activeoption"); 
    } else if (keyCode==13) { 
     window.location=$("a.activeoption")[0].href; 
    } 
} 
//--> 
</script> 

Demostración: http://www.dstrout.net/pub/keyscroll.htm

Answer 4

jQuery UI autocompletar se encarga de esta función muy bien, sin ningún código adicional:

http://jqueryui.com/demos/autocomplete/

Ver la demo en esta dirección URL para una cartilla rápida.

Answer 5

He reescrito el código un poco, debería hacer lo mismo, sólo más fácil de leer y un poco más eficiente:

$("#searchField").on({ 
    keyup : function(e) { 
     var code = (e.keyCode ? e.keyCode : e.which), 
      searchbox = this.value, 
      Sdisplay = $("#searchDisplay"); 
     if(searchbox=='') { 
      Sdisplay.html('').hide(); 
     }else{ 
      $.ajax({ 
      url: "ajax/?do=search_users&q="+ searchbox+"", 
      //data: dataString, 
      cache: false 
      }).done(function(html) { 
       Sdisplay.html(html).show(); 
      }); 
     } 
    }, 
    focus: function() { 
     $("#searchDisplay").slideDown();   
    }, 
    blur: function() { 
     $("#searchDisplay").slideUp(); 
    } 
}); 

En cuanto a los resultados de búsqueda, usted podría ya sea simplemente apuntar cada elemento <a> , pero es probable que tenga otros <a> elementos en su sitio, así que agregaría un contenedor para facilitar su orientación, podría hacerlo con las funciones jQuery's wrap() y cada(), pero si es posible, lo más fácil sería simplemente agréguelo en su PHP, como sigue:

<div id="searchDisplay"> 
    echo '<div class="wrapper">'; 
    echo '<a href="'.$_config['http'].$username.'">'; 
    echo '<div class="display_box" align="left">'; 
    echo '<img src="'.$img.'" style="width:25px; float:left; margin-right:6px" />'; 
    echo $name.'<br/>'; 
    echo '<span style="font-size:9px; color:#999999">'.$username.'</span></div></a>'; 
    echo '</div>'; 
</div> 

En cuanto a alternar el resultado con las teclas de flecha arriba/abajo y el cambio de ubicación para los resultados de la búsqueda, me gustaría hacer algo como (nótese el uso de la clase .wrapper previamente añadido):

if (code == 40 || code == 38 || code == 13) {//arrow keys and enter 
    if ($("#searchDisplay").is(':visible')) { 
     switch (code) { 
      case 40: //arrow down 
       act = act > $('.wrapper').length-2 ? 0 : act+1; 
       $(".wrapper").removeClass('active').eq(act).addClass('active'); 
      break; 
      case 38: //arrow up 
       act = act < 1 ? $('.wrapper').length-1 : act-1; 
       $(".wrapper").removeClass('active').eq(act).addClass('active'); 
      break; 
      case 13: //enter key 
       var ViElms = $('.wrapper').filter(':visible').filter('.active').length; 
       if (ViElms) { //if there are any search results visible with the active class 
        var link = $('.wrapper').eq(act).find('a')[0].href; 
        window.location.href = link; 
       } 
      break; 
    } 
} 

ahora a la memoria caché algunos selectores, y lo puso junto con la función keyup, hacer:

$(document).ready(function() { 
    var act = -1; 
    $("#searchField").on({ 
     keyup: function(e) { 
      var code = (e.keyCode ? e.keyCode : e.which), 
       searchbox = this.value, 
       Sdisplay = $("#searchDisplay"), 
       wrappers = $('.wrapper'); //there's that class again 
      if (searchbox == '') { 
       Sdisplay.html('').hide(); 
      } else { 
       Sdisplay.show(); 
       if (code == 40 || code == 38 || code == 13) { //do not search on arrow keys and enter 
        if (Sdisplay.is(':visible')) { 
         switch (code) { 
         case 40: //arrow down 
          act = act > wrappers.length - 2 ? 0 : act + 1; 
          wrappers.removeClass('active').eq(act).addClass('active'); 
          break; 
         case 38: //arrow up 
          act = act < 1 ? wrappers.length - 1 : act - 1; 
          wrappers.removeClass('active').eq(act).addClass('active'); 
          break; 
         case 13: //enter 
          var ViElms = wrappers.filter(':visible').filter('.active').length; 
          if (ViElms) { //if there are any search results visible with the active class 
           var link = wrappers.eq(act).find('a')[0].href; 
           window.location.href = link; 
          } 
          break; 
         } 
        } 
       } else { //do search 
        $.ajax({ 
         url: "ajax/?do=search_users&q="+ searchbox+"", 
         //data: dataString, 
         cache: false 
        }).done(function(html) { 
         Sdisplay.html(html).show(); 
        }); 
       } 
      } 
     }, 
     focus: function() { 
      $("#searchDisplay").slideDown(); 
     }, 
     blur: function() { 
      $("#searchDisplay").slideUp(); 
     } 
    }); 
});​ 

Aquí hay una DEMONSTRATION