基于input动态模糊查询的实现方法


Posted in Javascript onDecember 12, 2017

最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法。就分享一下目前遇到的坑和可以实现动态查询的几种方式。

1.jQuery的change()方法。

这个方法要失去所在的input框的焦点时,事件才会被触发,感觉有点鸡肋,也有可能是我没有完全会熟用这个方法,希望懂的大神可以分享一下使用秘籍。

<input type="text" id="n3"/>


var $n3=$("#n3);//定位到input框
$n3.change(function(){
 this.query_search($n3.val());//query_search为模糊查询的方法
})

change()函数用于为每个匹配元素的change事件绑定处理函数。该函数也可用于触发change事件。此外,你还可以额外传递给事件处理函数一些数据。change事件会在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>。对于text和textarea元素,该事件会在元素失去焦点时发生(文本内容也发生了更改)。此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发change事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过change()绑定的事件,请使用unbind()函数。

2.监听JQuery的keyup或者keydown事件

这个方法可以监听每个按键的触发事件,可以把模糊查询方法绑定到响应的事件上,每按一次就会触发一次模糊查询的事件,但是这样做会大大增加数据库的压力,如果人多操作而且没有缓存的话,数据库会分分钟炸掉。

<input type="text" id="#n3"/>

var $n3=$("#n3");//定位到input框
$n3.keyup(function(){
 this.query_search($n3.prop("value"));//query_search为模糊查询的方法 
})

3.使用Vue.js的watch属性观察者方法。

这个方法可以动态观察input框里面的属性变化情况,只要input框的value值发生变化,就会动态调用响应的方法。

基于input动态模糊查询的实现方法

基于input动态模糊查询的实现方法

基于input动态模糊查询的实现方法

基于input动态模糊查询的实现方法

最后值得一说的是,获取input的text框里面的value值有三种方法.

1.通过attr("value")获取。这种方法获取只能获取默认的。也就是说,你css代码里面原先定义的value值是多少,页面第一次展现的也是多少,而且这个值不会变。

2.通过prop("value")获取。这种方法能获取默认的,也能获取改变或的值,只要你改变了就能获取到。

3.通过val()获取。这个感觉和prop("value")差不多。

4.也可以用Vue.js的v-model绑定获取到,那就算是4种方法吧。

以上这些都只是只是个人多次测试得出的结论。并没有什么权威的说法,如果有错误,希望大神能够及时指正。

Javascript 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
详解vue.js之props传递参数
Dec 12 #Javascript
react实现菜单权限控制的方法
Dec 11 #Javascript
Angular 作用域scope的具体使用
Dec 11 #Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php实现encode64编码类实例
2015/03/24 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
python进程与线程小结实例分析
2018/11/11 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
实例讲解Vue.js中router传参
2018/04/22 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python生成excel的实例代码
2017/11/08 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
pandas的resample重采样的使用
2020/04/24 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Python脚本调试工具安装过程
2021/01/11 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
广告语设计及教案
2014/03/21 职场文书
档案信息化建设方案
2014/05/16 职场文书
整改落实自查报告
2014/11/05 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
Go timer如何调度
2021/06/09 Golang
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python