您的位置：首页 > Web前端 > JQuery

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

2017-12-19 18:09 761 查看

一、页面代码：
<!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="http://code.jquery.com/jquery-1.8.3.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>
二、js代码：
<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){

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航