我试图实现一个类似 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代码)。