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]按钮选择结果.

额外信息

这是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 echo部分有一个while循环,上面的代码只是html是如何的想法(searchDisplay与结果不在同一页面,检查jquery代码).

Answer 1

试试这个代码...我从我的书签收藏中找到了

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