facebook như tìm kiếm ajax - làm thế nào để đi qua kết quả bằng cách sử dụng bàn phím

Question

Im cố gắng để thực hiện một facebook như tìm kiếm sẽ trả về kết quả khi người dùng đang gõ (autocomplete), đây là đoạn code jquery Tôi đang sử dụng:

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

Kết quả trả về nằm trong cấu trúc div. Điều tôi không biết phải làm là cho phép người dùng đi qua kết quả bằng cách sử dụng phím [UP] và [DOWN] trên bàn phím và chọn kết quả bằng cách nhấn nút [ENTER].

EXTRA INFO

đây là 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> 

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

mỗi kết quả có mã html ở trên, và tất cả chúng được nạp vào a <div> với số id=searchDisplay.

* lưu ý rằng phần echo php có vòng lặp while, mã ở trên chỉ là ý tưởng về cách html giống như (searchDisplay không nằm trong cùng một trang với kết quả, kiểm tra mã jquery).

Answer 1

Hãy thử mã này ... tôi đã tìm thấy từ bookmark sưu tập của tôi

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

Answer 2

Có một plugin jQuery cho phép để liên kết hành động để shortcurs bàn phím. Tôi đã sử dụng nó để di chuyển một danh sách các mục sử dụng các phím con trỏ:

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

Xác định một phím tắt với plugin là đơn giản như vậy:

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

Answer 3

Hãy thử điều này. Cuộn qua danh sách và quay lại đầu/cuối khi bạn đi qua đầu/cuối.

<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 autocomplete xử lý chức năng này độc đáo, mà không cần bất kỳ mã bổ sung:

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

Xem demo tại url này cho một mồi nhanh chóng.

Answer 5

Tôi đã viết lại mã của bạn một chút, nên làm như vậy, chỉ cần dễ đọc hơn và hiệu quả hơn một chút:

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

Đối với các kết quả tìm kiếm, bạn có thể hoặc chỉ nhắm mục tiêu mỗi phần tử <a> , nhưng rất có thể bạn có các thành phần khác trên trang web của mình, vì vậy tôi sẽ thêm một trình bao bọc để làm cho chúng dễ nhắm mục tiêu hơn, bạn có thể làm điều đó với các hàm wrap() và từng() của jQuery, nhưng nếu có thể thêm nó vào trong PHP của bạn, như vậy:

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

Đối với chuyển đổi qua lại kết quả với các phím mũi tên lên/xuống và thay đổi vị trí để kết quả tìm kiếm, tôi sẽ làm một cái gì đó tương tự (chú ý việc sử dụng các lớp .wrapper thêm trước đó):

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

Bây giờ để bộ nhớ cache một số bộ chọn, và đặt nó cùng với keyup chức năng, làm:

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

Dưới đây là một DEMONSTRATION