Home > Article > Web Front-end > js/jQuery implements search functions similar to Baidu

js/jQuery implements search functions similar to Baidu

巴扎黑Original: 2016-11-25 13:44:29973browse

<!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 code:

  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(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
                }
            }else if(keycode == 13){
                dojob();
            }
        });
        var movePrev = function(){
            $("#kw").blur();
            var index = $(".addbg").prevAll().length;
            if(index == 0){
                $(".item").removeClass(&#39;addbg&#39;).eq($(".item").length-1).addClass(&#39;addbg&#39;);
            }else{
                $(".item").removeClass(&#39;addbg&#39;).eq(index-1).addClass(&#39;addbg&#39;);
            }
        }
        
        var moveNext = function(){
            var index = $(".addbg").prevAll().length;
            if(index == $(".item").length-1){
                $(".item").removeClass(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
            }else{
                $(".item").removeClass(&#39;addbg&#39;).eq(index+1).addClass(&#39;addbg&#39;);
            }
        }
       
        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=&#39;item&#39; onmouseenter=&#39;getFocus(this)&#39; onClick=&#39;getCon(this);&#39;>" + 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("");
    }

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript determines browser type and versionNext article：JavaScript determines browser type and version

See more

js/jQuery implements search functions similar to Baidu

Related articles