基于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添加输出窗口的代码
Feb 07 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
vue中三级导航的菜单权限控制
Mar 31 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
用js实现in_array的方法
2013/11/05 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python版微信红包分配算法
2015/05/04 Python
Python中IPYTHON入门实例
2015/05/11 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
flask框架视图函数用法示例
2018/07/19 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python requests指定出口ip的例子
2019/07/25 Python
详解Python中import机制
2020/09/11 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
行政管理专业求职信
2014/07/06 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL