类似百度搜索提示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
<meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">

    #container input{
        border:solid #87A900 2px;
        width:288px;
        height:30px;
        font-size:16px;
        padding:0 5px;
        line-height:30px;
    }
    #container .item{
        padding:3px 5px;
        cursor:pointer;
    }
    #container .addbg{
        background:#87A900;
    }
    #container .first{
        width:300px;
    }
    #container .append{
        border:solid #87A900 2px;
        border-top:0;
        display:none;
    }
</style>
</head>
<body>
    <div id="container">
    <div id="content">
        <div class="first"><input class="kw" onKeyup="getContent(this);" /></div>
        <div class="append"></div>
    </div>
    </div>
    <script type="text/javascript">
var data = [
    "你好，我是Michael",
    "你是谁",
    "你最好啦",
    "你最珍贵",
    "你是我最好的朋友",
    "你画我猜",
    "你是笨蛋",
    "你懂得",
    "你为我着迷",
    "你是我的眼"
];
$(document).ready(function(){
    $(document).keydown(function(e){
        e = e || window.event;
        var keycode = e.which ? e.which : e.keyCode;
        if(keycode == 38){
            if(jQuery.trim($(".append").html())==""){
                return;
            }
            movePrev();
        }else if(keycode == 40){
            if(jQuery.trim($(".append").html())==""){
                return;
            }
            $(".kw").blur();
            if($(".item").hasClass("addbg")){
                moveNext();
            }else{
                $(".item").removeClass('addbg').eq(0).addClass('addbg');
            }

        }else if(keycode == 13){
            dojob();
        }
    });

    var movePrev = function(){
        $(".kw").blur();
        var index = $(".addbg").prevAll().length;
        if(index == 0){
            $(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
        }else{
            $(".item").removeClass('addbg').eq(index-1).addClass('addbg');
        }
    }

    var moveNext = function(){
        var index = $(".addbg").prevAll().length;
        if(index == $(".item").length-1){
            $(".item").removeClass('addbg').eq(0).addClass('addbg');
        }else{
            $(".item").removeClass('addbg').eq(index+1).addClass('addbg');
        }

    }

    var dojob = function(){
        $(".kw").blur();
        var value = $(".addbg").text();
        $(".kw").val(value);
        $(".append").hide().html("");
    }
});
function getContent(obj){
    var kw = jQuery.trim($(obj).val());
    if(kw == ""){
        $(".append").hide().html("");
        return false;
    }
    var html = "";
    for (var i = 0; i < data.length; i++) {
        if (data[i].indexOf(kw) >= 0) {
            html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
        }
    }
    if(html != ""){
        $(".append").show().html(html);
    }else{
        $(".append").hide().html("");
    }
}
function getFocus(obj){
    $(".item").removeClass("addbg");
    $(obj).addClass("addbg");
}
function getCon(obj){
    var value = $(obj).text();
    $(".kw").val(value);
    $(".append").hide().html("");
}
$(function(){
$c = $(".append");
$c.hide();
$(".input1").on({
"click" : function() {
$c.toggle();
return false;
}
});
$(document).on({
"click" : function(e) {
var src = e.target;

if (src.id && src.id === "c") {
return false;
} else {
$c.hide();
}
}
});
})
</script>
</body>
</html>

类似百度搜索提示

猜你喜欢