js的模糊查询

在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用

但上次的项目中 又涉及到不试用插件的模糊搜索,使用原生来搜索,其实网上有很多种,但个人觉得正则还是好用,不区别大小写很方便,之前看网上测评速度,正则的速度也挺快的,

 <input type="text" v-model="textData" />

data() {
    return {
      textData: ""
    };
  },

 watch: {
    textData(val, arr) {
      console.log(val, arr); //val改变就可实时获取值 arr是要检测的数组
      if (val) {
        let reg = new RegExp(val, "gi");
        for (let i = 0; i < arr.length; i++) {
          arr[i].forEach(item => {
            if (!reg.test(item.name)) {
              item.checked = false; //模糊查询之后要执行的代码
            }
          });
        }
      }
    }
  }

原文地址:https://www.cnblogs.com/yanyanliu/p/12005033.html

时间: 2024-10-16 11:52:40

js的模糊查询的相关文章

前端js模糊搜索(模糊查询)

1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;">            <input type="text" id="searchShop" placeholder="场所搜索">            <input type="button"

基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用!

原文:基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用! 源代码下载地址:http://www.zuidaima.com/share/1550463575788544.htm 分页,查询功能已经全部用JS实现,无需再做此类代码编写,嵌入数据即可,真心美观好用.       

用js实现表格多条件模糊查询,可兼容分页

需求如下: 实现姓名.职位.直属上级.用户类型四个条件模糊查询,查询到的结果分页展示. 实现逻辑: 定义两个数组,其中vm.nowallUserLists为原始数据.vm.nowallUserFilter为筛选后数据.最终循环vm.nowallUserFilter来渲染表格. 筛选前,将vm.nowallUserLists的值赋给vm.nowallUserFilter,表格渲染全部数据. 筛选时,先初始化vm.nowallUserFilter为空数组,将筛选得到的内容推到这个数组中.此时表格渲染

js实现下拉框模糊查询

keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : string //输入的内容 方法一,filter()遍历: filtList = list.filter(data => { return data && data.toString().indexOf(inputContent)!==-1 }) 方法二,for循环: for(const

Springmvc+Myabtis+Ajax实现异步分页emp+dept(全部查询及模糊查询)

1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Administrator * */ public class Dept implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private Integer deptno; private Stri

ajax 判断账户密码 调取数据模糊查询 时钟

一.判断账户密码 <Login.html> 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="Script/jquery.js"></script> 5 <script languag

2015/10/25 用bootstrap selectpicker实现带模糊查询的下拉列表

今天的时间比较宽松,就整理一下自己这两天使用到的一个小插件功能吧,不求涉及太广,只是为了自己更好的理解. 实现功能:下拉列表显示人员列表,支持输入关键字进行模糊查询(人员列表通过数据库查询得到)1.java代码:Controller @RequestMapping(value = "list.do", method = RequestMethod.GET) public ModelAndView listUser(){ ModelAndView mav = new ModelAndVi

三大框架中模糊查询代码

js获取查询条件,并去后台查询 function queryByName(){                    //获取查询条件的用户名                    var queryName=$("#queryName").val();                    alert(queryName);                    //进行后台跳转                    window.location.href="<%=

AJAX基本操作 + 登录 + 删除 + 模糊查询

AJAX练习显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu