js实现类似百度谷歌的搜索效果,WebYang.NET- IT技术博客

js实现类似百度谷歌的搜索效果

AndyYang| 阅读：1201 发表时间：2012-10-08 16:55:00 js

摘要：最近有去快播面试，快播出了一个机试题，比较常见，就是实现类似百度谷歌的搜索功能，然后下面出来一些相关的列表。分享下代码咯：

最近有去快播面试，快播出了一个机试题，比较常见，就是实现类似百度谷歌的搜索功能，然后下面出来一些相关的列表。分享下代码咯：

----------------------------------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事件先触发了，所以赋值的反而没有执行。就这样，谢谢！

本文为AndyYang原创，转载请注明出处！
如果您觉得好，可以打赏作者：