一、页面代码：
<!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){
            $(".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("");
}
</script>
三、运行效果：
    1.在输入框输入关键字：

  2.键盘上下键选中：

  3.enter键输入：

js/jQuery实现类似百度搜索功能的更多相关文章

  1. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  2. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  3. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  4. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  6. jquery一句话实现快速搜索功能

    jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...

  7. jQuery实现简单前端搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ajax+JQuery实现类似百度智能搜索框

    最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先 ...

  9. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

随机推荐

  1. jquery 控制文本输入的字数

    <textarea maxlength="200" id="remarks" onkeyup="title_len();">&l ...

  2. ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation

    //=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...

  3. android下m、mm、mmm编译命令的使用

    android下m.mm.mmm编译命令的使用 通过查看android源码目录下的build/envsetup.sh文件,可知: - m:       Makes from the top of th ...

  4. HDU1114--Piggy-Bank(完全背包变形)

    Piggy-Bank   Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  5. HDU2181:哈密顿绕行世界问题(DFS)

    哈密顿绕行世界问题 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  6. linux和windows之间上传 下载文件 非ftp方式

    用 命令 rz   上传   sz 下载  文件夹加上 -r  rz上传替换时用 -y   谁用谁知道 两台linux传 : scp -r  文件夹  username@ip:路径  (如果传输文件就 ...

  7. haxe 中使用音效

    将wavSound.wav音效文件放到assets/sounds下, 在project.xml加入以下代码: <assets path="assets/sounds" ren ...

  8. Node.js学习 - Install and Configure

    平台:Windows 官网:https://nodejs.org/en/ 下载安装 CMD中运行 1 交互模式 2 命令模式 模块安装 - NPM npm install express #当前目录安 ...

  9. Win7下用easyBCD引导安装Ubuntu15.04

    1 准备工作 easyBCD中添加一个启动项 修改启动项配置文件 注意两点:C盘设备号,镜像名称 title Install Ubuntu root (hd0,) kernel (hd0,)/vmli ...

  10. vbs 截图

    'VBS截屏.vbs '  Win7x64 测试通过(已安装Word2007): '参考: '  http://qtp.blogspot.com/2010/02/screenshot-vbscript ...