Facebook的如AJAX搜索 - 如何通過結果使用鍵盤

Question

我試着當用戶鍵入（自動完成）來實現類似的搜索將返回結果的Facebook去了，這裏是我使用jQuery代碼：

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

返回結果以div結構。 我不知道該如何做的是讓用戶使用鍵盤上的[UP]和[DOWN]鍵並通過按[ENTER]按鈕選擇結果。

EXTRA INFO

這裏是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標記

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

每個結果具有上述HTML代碼，並且它們都被加載到<div>與id=searchDisplay。請注意，PHP回聲部分有一個while循環，上面的代碼只是html如何的想法（searchDisplay與結果不在同一頁，請檢查jQuery代碼）。

Answer 1

試試這個代碼...我已經從我的書籤收藏

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

Answer 2

有是一個jQuery插件，它允許綁定操作鍵盤shortcurs發現。我用它來導航使用光標鍵的項目清單：

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

定義與插件的快捷鍵就是這麼簡單：

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

Answer 3

試試這個。滾動瀏覽列表，當您經過開始/結束時回到頂部/底部。

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

演示：http://www.dstrout.net/pub/keyscroll.htm

Answer 4

jQuery用戶界面自動完成處理這個功能很好，沒有任何額外的代碼：

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

此網址查看演示的快速入門。

Answer 5

我已經重寫你的代碼一點點，也應該這樣做，只是更容易閱讀和多一點效率：

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

至於搜索結果，你可以要麼只是針對每個<a>元素，但有可能你的網站上有其他<a>元素，所以我會添加一個包裝來使它們更容易定位，你可以用jQuery的wrap（）和each（）函數來做到這一點，但如果可能的話，最簡單的方法就是將它添加到你的PHP中，如下所示：

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

至於使用向上/向下箭頭鍵切換的結果，改變位置到搜索結果中，我會做類似（請注意使用之前添加的.wrapper類）：

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

我們緩存一些選擇，並與keyup功能放在一起，這樣做：

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

這裏有一個DEMONSTRATION