最近有去快播面试，快播出了一个机试题，比较常见，就是实现类似百度谷歌的搜索功能，然后下面出来一些相关的列表。分享下代码咯：
———————————-index.html———————————-
<html>
<title>类似百度谷歌的搜索</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style>
body{text-align:center;}
.content{margin:50 auto auto;width:400px;}
#senduser{width:400px; height:25px;}
.bgray{background-color:#D2E9FA;}
.ulBorder{border: 1px solid rgb(221, 221, 221); margin:2px 0 auto; padding:0px;line-height:20px;text-align:left;font-size:14px;}
.ulBorder li{list-style:none;}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.js" ></script>
<script>
$(document).ready(function(){
var tempNum = 0;
var ulobj = $('div#showMoreFriend');
/*mouse action*/
ulobj.find('li').live({
mouseover:function(){
$(this).parent().find('li').removeClass('bgray');
$(this).addClass('bgray');
tempNum = $(this).index();
},
mouseout:function(){
$(this).removeClass('bgray');
},
click:function(){
var word = $.trim($(this).text());
$('#senduser').val(word);
ulobj.empty();
}
});
$('#senduser').live({
keyup:function(event){
if(event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 13) {
var param = $.trim($(this).val());
param = param ? param : '';
setTimeout(function () {
$.post('json.php', {keyword:param}, function(data) {
if(data.count > 0) {
var html;
html = '<ul class="ulBorder">';
for(var i=0; i<data.count; i++) {
html += '<li>'+data.mess[i]+'</li>';
}
html += '</ul>';
ulobj.html(html);
ulobj.find('li').eq(0).addClass('bgray');
} else {
ulobj.empty();
}
}, 'json');
}, 1000);
} else {
/*key action*/
var count = ulobj.find('li').size();
if(event.keyCode == 38) { //up
if(tempNum<1) {
tempNum = count-1;
} else {
tempNum--;
}
ulobj.find('li').removeClass('bgray');
ulobj.find('li').eq(tempNum).addClass('bgray');
} else if(event.keyCode == 40) { //down
if(tempNum>=(count-1)) {
tempNum = 0;
} else {
tempNum++;
}
ulobj.find('li').removeClass('bgray');
ulobj.find('li').eq(tempNum).addClass('bgray');
} else if(event.keyCode == 13) { //enter
var word = $.trim(ulobj.find('li.bgray').text());
$('#senduser').val(word);
ulobj.empty();
}
/*action end*/
}
},
blur:function(){
setTimeout(function() {
ulobj.empty();
},1000);
}
});
});
</script>
</head>
<body>
<div class="content">
<input type="text" name="keyword" id="senduser">
<div id="showMoreFriend"></div>
</div>
</body>
</html>
———————————-json.php———————————-
<?php
$keyword = $_POST['keyword'] ? $_POST['keyword'] : '';
$mess = array('中国', '中国好', '中国好强', '我很好', '我很好哦', '你是', '你是谁', 'my home', 'my homedown is china', 'my homedown');
if(!empty($keyword)) {
$parten = '/'.$keyword.'/i';
$data = array();
foreach($mess as $m) {
preg_match($parten, $m, $match);
if(isset($match[0])) {
$data[] = $m;
}
}
} else {
$data = $mess;
}
$info = array(
'mess' => $data,
'count' => count($data)
);
echo json_encode($info);
ps:大体实现如上咯，各位可以根据它来修改。网上也有蛮多版本的，但都差不多。第一个setTimeout是为了减轻数据库的压力，因为那些数据在实际应用中肯定是通过select查询出来的。第二个setTimeout如果不设置的话，直接给blur事件，我发现选择内容不显示，blur事件先触发了，所以赋值的反而没有执行。就这样，谢谢！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/98525.html