facebook jak ajax wyszukiwania - jak przejść przez wynikami za pomocą klawiatury

Question

im próbuje wdrożyć Facebook Like poszukiwaniu że zwróci wyniki, gdy użytkownik jest wpisanie (autouzupełnianie), tutaj jest kod jQuery Używam:

$(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(); 
    } 
}); 

Powracający wynik jest w strukturze div. Nie wiem, jak to zrobić, aby umożliwić użytkownikom przeglądanie wyników za pomocą klawiszy [UP] i [DOWN] na klawiaturze i wybór wyniku za pomocą przycisku [ENTER].

EXTRA INFO

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

HTML Markup

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

każdy wynik ma wyżej kod HTML, a wszystkie one są ładowane do a <div> z id=searchDisplay.

* Zauważ, że część php echo ma pętlę while, powyższy kod jest po prostu ideą tego, jak wygląda html (the searchDisplay nie znajduje się na tej samej stronie co wynik, sprawdź kod jquery).

Answer 1

Spróbuj tego kodu ... znalazłem z moich zakładek kolekcji

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

Answer 2

Jest plugin jQuery, który pozwala powiązać działania w celu shortcurs klawiaturowych. Używałem go do poruszania listę elementów za pomocą klawiszy kursora:

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

Definiowanie klawisza skrótu z wtyczką jest tak proste, jak:

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

Answer 3

Spróbuj tego. Przewija listę i wraca do góry/dołu, kiedy mijasz początek/koniec.

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

Demo: http://www.dstrout.net/pub/keyscroll.htm

Answer 4

jQuery UI autouzupełnianie obsługuje tej funkcji ładnie, bez żadnego dodatkowego kodu:

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

Zobacz demo pod adresem URL do szybkiego podkładu.

Answer 5

mam przepisany kod trochę, powinien zrobić to samo, tylko bardziej czytelna i trochę bardziej efektywne:

$("#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(); 
    } 
}); 

Co do wyników wyszukiwania, można też po prostu kierować każdy element <a> , ale jest szansa, że ​​masz inne elementy na swojej stronie, więc dodałabym opakowanie, aby łatwiej było je kierować, możesz to zrobić za pomocą funkcji wrap() i each() jQuery, ale jeśli to możliwe, najłatwiej byłoby po prostu dodaj go do swojego PHP, tak jak:

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

chodzi o przełączenie wynik z klawiszy strzałek w górę/w dół i zmieniając położenie do wyników wyszukiwania, chciałbym zrobić coś takiego (Zauważ użycie klasy .wrapper dodanego wcześniej):

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; 
    } 
} 

Teraz do pamięci podręcznej Niektóre przełączniki, i umieścić go razem z funkcją keyup, zrobić:

$(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(); 
     } 
    }); 
});​ 

Oto DEMONSTRATION