js/jQuery实现类似百度搜索功能

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        #container{
            position:absolute;
            left:50%;
            top: 40%;
        }
        #content{
            float:left;
            position:relative;
            right:50%;
        }
        input{
            border:0;
            width:288px;
            height:30px;
            font-size:16px;
            padding:0 5px;
            line-height:30px;
        }
        .item{
            padding:3px 5px;
            cursor:pointer;
        }
        .addbg{
            background:#87A900;
        }
        .first{
            border:solid #87A900 2px;
            width:300px;
        }
        #append{
            border:solid #87A900 2px;
            border-top:0;
            display:none;
        }
  </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div class="first">
                <input id="kw" onKeyup="getContent(this);" />
            </div>
            <div id="append"></div>
        </div>
    </div>
</body>
</html>

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("");
    }

效果图：

以上代码源自：http://blog.sina.com.cn/s/blog_798c1d510101c26y.html
另外还有一个有关keycode的网站：http://www.cnblogs.com/shipengzhi/articles/2035010.html

----------------
最简单的写法：

<input type="text" name="" id="search" value="">
<!--从数据库中搜索，返回结果，用js实时显示该div-->
<div class="search-result">
	<p class="search-result-con">1</p>
	<p class="search-result-con">2</p>
	<p class="search-result-con">3</p>
	<!--找不到结果时显示该div-->
	<p class="search-result-warn">很抱歉，没有找到与“<span>souibaisfdfsddsfd</span>”相关的内容。</p>
</div>

/*点击内容后显示在搜索框里的代码*/
var oResult = document.querySelectorAll('.search-result-con');
var oInput  = document.getElementById('search');
for(var i=0;i<oResult.length;i++){
	oResult[i].onclick=function(){
		alert(this.innerText)
		oInput.value=this.innerText;
	}
}

js/jQuery实现类似百度搜索功能

猜你喜欢