jQuery实现input框输入值动态搜索
来源:互联网 发布:97网络含义是什么 编辑:程序博客网 时间:2024/06/16 22:06
这篇博客的主题是关于如何利用jQuery来实现在输入框输入数据时,进行实时的搜索,显示出符合条件的数据并展示出来。
我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点。我本来的想法是给一个iframe,在
里面显示所有的数据并提供一个筛选的功能,但是觉得比较繁琐。于是想到了在百度上搜素时,它的自动搜索和此种需求比较切合,且在操作中比较方便。但是也存在着显示数据
不可过多,筛选条件单一的缺点。
当然这种实时的前后台交互是利用ajax实现的。
首先贴一下最后的效果:
选择相应的结果后:
注:这里前方多出的序列号是为了方便取出获取到的用户表主键,虽然觉得不太安全,但还是这么做了....
具体的实现代码如下:
首先是页面的input输入框,以及用来展示搜索结果的ul区域。这里使用ul是借鉴(其实就是拷),因为我对css实在不感冒。
关于如何实现用户输入后实时搜索,我在百度查了一下,了解到的大致有以下:
以秒为单位对input框进行监听,用户输入的间隔时间大概为半秒,因此每半秒去请求后台。
还有就是我采用的这种方法,使用keyup函数,并对输入内容做简单的判断:
下面是ajax请求后,对获取的数据进行处理:
由于后台想要的只是一个ID,用户名称是给前台操作人员看的,所以这里为了方便知道用户选择了哪个结果,我把ID也显示了出来
在前台我没有对显示的数据条数进行限制,这个限制可以放在后台,但其实现在后台我还没加...ganga
OK,本次博客就到这里,依旧短小,hah
- jQuery实现input框输入值动态搜索
- jquery实现类似百度的搜索input输入框
- jquery实现input输入框输入值自动智能提示的实现
- jquery实现input输入框实时输入触发事件
- jquery实现input输入框实时输入触发事件
- jquery 改变 输入框 input 的值 动态监听值改变
- 关于实现输入框动态搜索输入,自动更新listview
- jquery实现input点击输入框弹出日期
- jQuery实现动态添加删除输入框
- JQuery获取input输入值
- JavaScript动态创建Input输入框动态获取值
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- 【jquery+input标签】实现回车搜索
- jQuery实现可输入搜索文字的下拉框
- jquery+ajax实现像百度搜索框中输入文字
- JQuery 实时监听input输入框的值
- 如何用jquery获取input输入框中的值?
- winform与unity之间的Socket通讯
- 设计模式三连发
- HADOOP集群搭建实战(HA高可靠性模式)
- (1)Python笔记:抓取CSDN博文
- LRU算法 c++手写 map
- jQuery实现input框输入值动态搜索
- 洛谷的文件夹(树形结构+DFS+字符串哈希)
- Android recycleview 多布局
- 最令人头疼的 Python 问题
- Django vs SQLAlchemy:哪个 Python ORM 更好
- 2017年中国程序员调查分析:大数据就业前景广阔
- IntelliJ IDEA 学习笔记
- Andorid架构之BaseActivity
- 用Python3实现一个简单的爬虫。