基于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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
Vue.js实现的购物车功能详解
Jan 27 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
Jquery Fade用法详解
Nov 06 jQuery
详解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实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python 数据的清理行为实例详解
2017/07/12 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
在python中安装basemap的教程
2018/09/20 Python
详解python中init方法和随机数方法
2019/03/13 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python统计字符的个数代码实例
2020/02/07 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
大型晚会策划方案
2014/02/06 职场文书
一句话工作感言
2014/03/01 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
Python 图片添加美颜效果
2022/04/28 Python