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

最近在用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的text框里面的value值有三种方法.

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

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

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

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

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

赞 (0)

相关推荐

  • js实现模糊匹配功能

    功能描述: 在搜索框中输入某一个字段,可以查询到相关的内容 功能实现: 1.  先声明变量用于保存输入框以及表格里面的内容 2.  循环遍历 遍历表格每一行,查找匹配项 3.  判断 如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏 功能实现: <html> <head> <style> #myInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border

  • jQuery实现id模糊查询的小例子

    eg_1. 在页面中查找某id图片集合,先放到代码: 复制代码 代码如下: <div id="cacheLayerContainer-CBS-882" >    <img src="" id="CBS_1_0" style="width: 256px; height: 256px">    <img src="" id="CBS_1_1" style=&qu

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

    最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的change()方法. 这个方法要失去所在的input框的焦点时,事件才会被触发,感觉有点鸡肋,也有可能是我没有完全会熟用这个方法,希望懂的大神可以分享一下使用秘籍. <input type="text" id="n3"/> var $n3=$("#n3)

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • mysql基于正则实现模糊替换字符串的方法分析

    本文实例讲述了mysql基于正则实现模糊替换字符串的方法.分享给大家供大家参考,具体如下: 例如: abcd(efg)hijk 替换之后是abcdhijk 复制代码 代码如下: update tabaleA set name = replace(name, substring(name, locate('<contact>', name),locate('</contact>', name)-locate('<contact>'+10, name)),''); 执行之后

  • mybatis 模糊查询的实现方法

    mybatis 模糊查询的实现方法 mybatis的逆向助手确实好用,可以省去很多编写常规sql语句的时间,但是它没办法自动生成模糊查询语句,但开发中模糊查询是必不可少的,所以,需要手动对mapper编写模糊查询功能. 这里先明确MyBatis/Ibatis中#和$的区别: 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111", 如果传入的值是id,则解

  • 在java List中进行模糊查询的实现方法

    比如我有下面这样一个List,里面存放的是多个Employee对象.然后我想对这个List进行按照Employee对象的名字进行模糊查询.有什么好的解决方案么? 比如我输入的查询条件为"wang",那么应该返回只包含employee1的List列表. List list = new ArrayList(); Employee employee1 = new Employee(); employee1.setName("wangqiang"); employee1.s

  • PHP模糊查询的实现方法(推荐)

    模式查询 1. SQL匹配模式 2. 正则表达式匹配模式(一般不推荐使用) SQL匹配模式 1.使用sql匹配模式,不能使用操作符=或!=,而是使用操作符LIKE或NOT LIKE: 2.使用sql匹配模式,MYSQL提供了2种通配符. %表示任意数量的任意字符(其中包括0个) _表示任意单个字符 3.使用sql匹配模式,如果匹配格式中不包含以上2种通配符中的任意一个,其查询的效果等同于=或!= 4.使用sql匹配模式,匹配时,不区分大小写 #查询用户名以某个字符开头的用户 #查询用户名以字符'

  • vue实现input输入模糊查询的三种方式

    vue实现input输入模糊查询的三种方式

    目录 1 计算属性实现模糊查询 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html 文件,代码直接放入即可. 这里自己导入 vue,我是导入本地已经下载好的. <script src="./lib/vue-2.6.12.js"></script> 演示: 打开默认显示全部 输入关键字模糊查询,名字和年龄都可以 完整代码如下: <!DOCTYPE html> &l

  • vue input输入框模糊查询的示例代码

    vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • Vue实现模糊查询的简单方法实例

    Vue实现模糊查询的简单方法实例

    前言 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子:其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示:原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax连续多次触发,再加上如

  • MySQL单表多关键字模糊查询的实现方法

    在最近的一个项目需要实现在MySQL单表多关键字模糊查询,但这数个关键字并不一定都存在于某个字段.例如现有table表,其中有title,tag,description三个字段,分别记录一条资料的标题,标签和介绍.然后根据用户输入的查询请求,将输入的字串通过空格分割为多个关键字,再在这三个字段中查询包含这些关键字的记录. 可目前遇到的问题是,这些关键字是可能存在于三个字段中的任意一个或者多个,但又要求三个字段必须包含所有的关键词.如果分别对每个字段进行模糊匹配,是没法实现所需的要求,由此想到两种

随机推荐