一、页面代码：
<!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. java数据结构之有序表查找

    这篇文章是关于有序表的查找,主要包括了顺序查找的优化用法.折半查找.插值查找.斐波那契查找: 顺序优化查找:效率极为底下,但是算法简单,适用于小型数据查找: 折半查找:又称为二分查找,它是从查找表的中 ...

  2. java 协调同步的线程

    Example12_8.java public class Example12_8 { public static void main(String args[ ]) { TicketHouse of ...

  3. [转]solr DataImportHandler 解决mysql 表导入内存溢出问题

    最近一个项目要用到solr做全文检索,开始盲人摸象. 用tomcat 7 开始配置,开始正常,但是遇到cookie里有中文就报错. 无奈,换tomcat 6, 结果DataImportHandler ...

  4. 去除移动端点击事件出现的背景框 tap-highlight-color

    -webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色 ...

  5. 集合问题 离线+并查集 HDU 3938

    题目大意:给你n个点,m条边,q个询问,每条边有一个val,每次询问也询问一个val,定义:这样条件的两个点(u,v),使得u->v的的价值就是所有的通路中的的最长的边最短.问满足这样的点对有几 ...

  6. 我也谈javascript闭包的原理理解

    参考原文:http://www.oschina.net/question/28_41112 前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对 ...

  7. 我有一壶酒 Android学习之Service(1)--->BinderService方式

    本文只讨论扩展Binder类 创建一个Binder.xml <?xml version="1.0" encoding="utf-8"?> <L ...

  8. 总结OpenWrt系统基本操作方法

    1.OpenWrt系统编译好的固件位于哪个文件夹?root@ald888:/work/openwrt/trunk/bin/ramips# lsopenwrt-ramips-rt305x-mpr-a2- ...

  9. 配置nova instances使用NFS后端

    首先先使用“nova delete”命令删除所有实例,释放磁盘空间. 停止nova服务:service libvirtd stopservice openstack-nova-compute stop ...

  10. iOS开发——GCDAsyncSocket

    新进的这家公司搞智能家居,就随便整理一下其相关技术吧!首先,从GCDAsyncSocket的使用问题着手. 正如名称一样GCDAsyncSocket开源类库是以苹果的GCD多任务处理机制完成的一个异步 ...