最近工作中需要做一个搜索框，类似百度的搜索框，需要达到两个功能：

　　1.输入关键字,展示匹配的下拉列表

　　2.选择匹配的项后查出相关内容

　　一般电商网站中也经常用到该搜索条，首先分析功能实现，输入关键字马上显示匹配项列表，实现该功能输入框需要绑定"input"事件，然后向后台发送异步请求，将数据展示在页面上。使用鼠标或上下键选择匹配项，点击搜索或"Enter"键后搜索具体结果。这里要用到两个异步请求，第一个请求匹配项，第二个请求搜索结果。键盘，鼠标以及输入框的事件都要监听到，还必须考虑到灵活性，也就是适应各种类似需求，想做好还是有一些难度的，下面分布进行实现。

一.html和css

<body>

    <div id="search-form"></div>

</body>
<style type="text/css">

    *{margin:;padding:;list-style:none;border:none;}

    body {

        font-family: "microsoft yahei" !important;

        background-color: #FDFFE0;

    }

    :focus {

        outline: none;

    }

    #search-form {

        position: relative;

        top: 50px;

        display: inline;

    }

</style>

二.导入css和js文件

由于博客上传不了文件，可以去我的git:http://git.oschina.net/manliu.com/search_frame上有完整的项目文件

三.页面引用js

<script type="text/javascript">

var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7','17素材网','百度','新浪'];

$(document).ready(function(){

    $('#search-form').complete({

        searchIn:function(val){//传入输入值，返回匹配值

            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;

            return reg.test(val); */

            var word = "^"+val+".*";

            var rs = [];

            $.each(proposals,function(i,n){

                if(n.match(word)){

                    rs.push(n);

                }

            });

            return rs;

        },

        width:400,

        height: 30,

        submitIn: function(text){//搜索选定的值

            alert(text);

        }

    });

});

</script>

这里searchIn方法用于返回匹配项，通常在里面定义一个异步请求，向后台取数据，返回一个数组，对于复杂的还需要修改源码；submitIn用于搜索匹配的结果，一般可异步请求也可同步请求。

Jquery实现类似百度的搜索框的更多相关文章

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

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

  2. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

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

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  4. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  5. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  6. js 百度云搜索框

    // ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个 ...

  7. AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

  8. 使用jqueryUI和corethink实现的类似百度的搜索提示

    代码:http://download.csdn.net/detail/u012995856/9676845 效果: 目录: 这里是以corethink模块的形式,只需要安装上访问 index.php? ...

  9. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

随机推荐

  1. git学习教程二之远程仓库学习

    首先你需要注册一个github用户名,我的github账户是:1654218052@qq.com 由于本地的git仓库和github的仓库是通过SSH加密的,所以我们还需要设置一点东西哦 第1步:创建 ...

  2. AssetBundle资源打包与加载

    AssetBundle资源打包  1.AssetLabels资源标签 文件名:资源打包成AssetBundle后的文件名,类似于压缩包的名字 后缀:自定义 文件名和后缀名都是小写格式(大写会自动转为小 ...

  3. 【CSS】我的颜色到底听谁的？—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

  4. CSP考试策略

    准备 带好手表,身份证,准考证,文具,和矿泉水(热水). 考试之前 如果时间比较充足,可以重启测试保护是否解开. 调整显示屏亮度,检查键盘.鼠标. 关掉拓展名隐藏. 写个简单程序测试是否有异常,测试对 ...

  5. python 字符串格式化 format

    用法: 它通过{}和:来代替传统%方式 1.使用位置参数 要点:从以下例子可以看出位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 ...

  6. Nginx 配置文件解释及简单配置

    Nginx配置文件大致分为以下几个块 1.全局块:配置影响nginx全局的指令.一般有运行nginx服务器的用户组,nginx进程pid存放路径,日志存放路径,配置文件引入,允许生成worker pr ...

  7. MySQL如何利用索引优化ORDER BY排序语

    MySQL索引通常是被用于提高WHERE条件的数据行匹配或者执行联结操作时匹配其它表的数据行的搜索速度. MySQL也能利用索引来快速地执行ORDER BY和GROUP BY语句的排序和分组操作. 通 ...

  8. K8s的kubectl常用命令

    一. 设置kubectl输入命令自动补全 依次执行一下命令: yum install -y bash-completion source /usr/share/bash-completion/bash ...

  9. stalstack

    Saltstack 是干什么的 saltstack 是一个开源异构平台基础设置管理工具 Saltstack 能干什么 如果是一个管理成千上百服务器的管理员,你会遇到场景 需要在每台服务器上面部署age ...

  10. __declspec(dllexport)的作用

    加了之后发现,用ollydbg导入dll,可以自动判断某个函数是导出函数