jQuery搜索框输入实时进行查询
在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车。
实现方式为:
$(".search").bind("input propertychange",function(event){
//进行查询操作
})
一、首先分清下面几个概念:
onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好。
onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。只有IE11以下浏览器支持此事件。
oninput事件:此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
二、然后我们主要是结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。不过oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的写法。
jQuery搜索框输入实时进行查询的更多相关文章
- vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- bootstrap-select搜索框输入中文
bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...
- Jquery 搜索框自动提示
为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...
- js搜索框输入提示(高效-ys8)
<style type="text/css"> .inputbox .seleDiv { border: 1px solid #CCCCCC; display: non ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- selenium-百度搜索框输入后,定位联想下拉框元素
1.输入关键字后,显示联想下拉框,鼠标右键对应的联想字段,点击检查,就可在F12模式下元素查看器中定位到,之后使用Xpath定位.
- JavaScript input框输入实时校验
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jquery文本框内容实时监控
$("#A").bind("input propertychange", function () { $("#B").val($(this) ...
随机推荐
- 「CF161B」Discounts
传送门 Luogu 解题思路 贪心地想一想,我们肯定要让凳子去给价格越高的商品打半价,那么我们就先按照价格排序,但是要优先把凳子排在前面. 然后我们发现一条凳子肯定只能给价格小于等于它本身的物品打半价 ...
- SpringBoot开发环境要求
JDK 截止到目前Spring Boot 的最新版本:2.1.8.RELEASE 要求 JDK 版本在 1.8 以上,所以确保你的电脑已经正确下载安装配置了 JDK(推荐 JDK 1.8 版本). 构 ...
- java 获取当前时间,前一天时间
java获取当前时间,并按一定格式输出 1.用Calendar获取Date Calendar calendar=Calendar.getInstance(); SimpleDateFormat for ...
- Redis散列表类型
散列类型(hash)的键值也是一种字典结构,其存储了字段(field)和字段值的映射,但字段值只能是字符串,不支持其他的数据类型. 一个散列类型键可以包含至多2^32 -1个字段. 命令 赋值 HSE ...
- 浅谈Spring发展史
1 码农的春天----------Spring来了 Spring官网 :http://www.springframework.org 关于Spring的发展起源要回溯到2002年,当时正是Java E ...
- 使用windows函数SetWindowsHookEx实现键盘钩子
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- 01.DesignParttern设计模式,简单工厂,工厂方法,抽象工厂三大工厂的区别与联系
工厂用来生产对象,对象具有方法和属性. 简单工厂的缺点(简单工厂并不是23中设计模式): 工厂类的职责相对过重,增加新的产品,需要修改工厂类的判断逻辑,违背开闭原则: JDK源 ...
- Mozilla Firefox 68 正式发布下载:对刚Chrome
Mozilla Firefox 68开源和跨平台Web浏览器现在正式发布,可以下载适用于GNU/Linux,Mac和Windows平台的Firefox 68了. Firefox 68网络浏览器现在可以 ...
- java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver java.sql.SQLException
今天下午一直想用netbeans连接数据库,结果就是来来回回碰到这两个问题. 我还在想,连接数据库并不是一个什么困难的事情啊,我都按照教程上一步一步做的,代码什么的都感觉很好,怎么就找不到类呢,怎么就 ...
- Kubernetes——命令行操作
如果集群初始化失败需要的操作: master: kubeadm reset #回答y 执行一条它提示给你的iptables命令即可 node: systemctl stop kubelet ...