在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车。

实现方式为:

$(".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搜索框输入实时进行查询的更多相关文章

  1. vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据

    如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...

  2. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  3. bootstrap-select搜索框输入中文

    bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...

  4. Jquery 搜索框自动提示

    为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...

  5. js搜索框输入提示(高效-ys8)

    <style type="text/css"> .inputbox .seleDiv { border: 1px solid #CCCCCC; display: non ...

  6. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  7. selenium-百度搜索框输入后,定位联想下拉框元素

    1.输入关键字后,显示联想下拉框,鼠标右键对应的联想字段,点击检查,就可在F12模式下元素查看器中定位到,之后使用Xpath定位.

  8. JavaScript input框输入实时校验

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. jquery文本框内容实时监控

    $("#A").bind("input propertychange", function () { $("#B").val($(this) ...

随机推荐

  1. 自定义工具'MSDiscocodeGenerator’失败。未能检索当前项目。

    问题描述: 引用webservice时不出错,但更新是出现错误 “自定义工具'MSDiscocodeGenerator’失败.未能检索当前项目.” 解决办法: 打开控制面板修复.NET 3.5SP1, ...

  2. mysqlworkbench导入sql文件

    直接给上神秘地址怕自己以后忘记:https://blog.csdn.net/u010801439/article/details/78762387

  3. 全面理解Java中的String数据类型

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  4. C++ 动态多态

    背景 以前的学习,只是简单地知道:面向对象的三大特性(封装.继承.多态) ,在项目开发中,用到了多态而自己却不知道. 多态(Polymorphism)按字面的意思就是"多种状态". ...

  5. hue中访问impala报错

    hue中访问impala报错:Could not connect to node03:21050 原因:impala服务未启动. 解决方法:在3个节点上都启动impala: 主节点node03启动以下 ...

  6. delphi对ZIP解压

    Delphi 对GZIP解压 作者:admin 来源:未知 日期:2010/5/9 13:08:46 人气:获取失败 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 呵呵,终于 ...

  7. 2、MYSQL 基本数据库命令及约束

    [注]sql语句注意不要忘了后面的   “  : ”,表示结束符 1.如何登陆数据库服务器 C:\Users\zhg>mysql -uroot -p Enter password: ****** ...

  8. Java连载67-深入一维数组、main方法中的args参数详解

    一.复习了一维数组,还复习了强制类型转换的注意点. package com.bjpowernode.java_learning; public class D67_1_GoDeepIntoArrays ...

  9. 春运到了,带你用python来抢票回家!

    不知不觉,一年一度的春运抢票大幕已经拉开,想快速抢到回家的车票吗?作为程序员,这些技术手段,你一定要知道. 为了让大家更快捷更便利的抢火车票,各种各样的抢票软件应需而生,这类软件大部分都是付费抢票的机 ...

  10. 014.CI4框架CodeIgniter数据库操作之:查询数据库,并让数据以对象的方式返回查询结果

    01. 我们在CI4框架中的Model文件夹新建一个User_model.php的文件,使用的是getResultArray,表示并让数据以数组的方式返回查询结果,代码如下: <?php nam ...