Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框，类似百度的搜索框，需要达到两个功能：
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实现类似百度的搜索框的更多相关文章
- ajax+JQuery实现类似百度智能搜索框
最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先 ...
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- js 百度云搜索框
// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个 ...
- AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作
<script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...
- 使用jqueryUI和corethink实现的类似百度的搜索提示
代码:http://download.csdn.net/detail/u012995856/9676845 效果: 目录: 这里是以corethink模块的形式,只需要安装上访问 index.php? ...
- Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）
此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...
随机推荐
- Buffer与Cache的理解
Linux与Windows内存Linux系统的内存机制是优先使用物理内存,当物理内存还有空闲时,Linux系统是不会释放内存的,即使使用过内存的程序已经被关闭,这部分内存就用来做缓存了.换句话说,即使 ...
- list-style-type:none是加在ul还是li中呢？
很多时候我们都需要多对列表元素进行初始化,方法是给列表元素添加list-style-type: none,但作为小白的我是经常纠结一个问题:是把它加在ul中还是li中呢 我试了一下,加在ul和li都能 ...
- nginx 代理 registry docker certificate is valid for k8s, not
1.配置SSL证书及nginx反向代理docker registry 搭建私有CA,初始化CA环境,在/etc/pki/CA/下建立证书索引数据库文件index.txt和序列号文件serial,并为证 ...
- lower_bound( )和upper_bound( )的常见用法
lower_bound( )和upper_bound( )都是利用二分查找的方法在一个排好序的数组中进行查找的. 在从小到大的排序数组中, lower_bound( begin,end,num):从数 ...
- C语言Ⅰ博客作业10
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/10097 我在这个课程的 ...
- hadoop(一HDFS)
hadoop(一HDFS) 介绍 狭义上来说: hadoop指的是以下的三大系统: HDFS :分布式文件系统(高吞吐,没有延时要求,容错性,扩展能力) MapReduce : 分布式计算系统 Yar ...
- 有关java5以后的线程
创建线程的方式 方式一 继承于Thread类 /** * 多线程的创建,方式一:继承于Thread类 * 1. 创建一个继承于Thread类的子类 * 2. 重写Thread类的run() --> ...
- python的文件读写操作
文件读写 本文转自廖雪峰老师的教程https://www.liaoxuefeng.com/wiki/1016959663602400/1017607179232640 读写文件是最常见的IO操作.Py ...
- Java EE javax.servlet.http中的HttpSession接口
HttpSession接口 public interface HttpSession (https://docs.oracle.com/javaee/7/api/javax/servlet/http/ ...
- redis 学习（18）-- AOF
redis -- AOF 什么是 AOF 通过日志方式将redis中的写命令进行日志记录,保存在硬盘文件中. 日志记录的实质是将写命令写在硬盘的缓冲区中,再根据相关策略把数据刷新到磁盘中. 当redi ...