基于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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
纯JS实现轮播图
Feb 22 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
详解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代码
2010/08/08 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
React快速入门教程
2017/01/17 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
Node.js简单入门前传
2017/08/21 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python numpy实现rolling滚动案例
2020/06/08 Python
static关键字的用法
2013/10/07 面试题
25道Java面试题集合
2013/05/21 面试题
工作自荐信
2013/12/11 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
个人授权委托书
2014/09/15 职场文书
运动会稿件100字
2014/09/24 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
重阳节主题班会
2015/08/17 职场文书
Jsonp劫持学习
2021/04/01 PHP
java开发双人五子棋游戏
2022/05/06 Java/Android