前端实现简单模糊搜索

首先看看实现的效果

这里把用户输入的字符串用正则拆分成单个字符去匹配数组中包含这些字符的值。

详细代码如下：

//value是获取到的用户输入的值
//dataList是后台返回数组
//dataSource是根据用户输入的value值去dataList里筛选出符合条件的项let dataSource= dataList.filter(function (item) {//遍历数组，返回值为true保留并复制到新数组，false则过滤掉let inputValue=new RegExp(`(.*)(${value.split('').join(')(.*)(')})(.*)`, 'i');return item.match(inputValue);});

注意：当value值被清除为空时，这里有可能会报错TypeError: Cannot read property 'split' of undefined

解决方法如下：

let valueInput=value || '';
let dataSource= dataList.filter(function (item) {//遍历数组，返回值为true保留并复制到新数组，false则过滤掉let inputValue=new RegExp(`(.*)(${valueInput.split('').join(')(.*)(')})(.*)`, 'i');return item.match(inputValue);});

出处：https://blog.csdn.net/qq_41882147/article/details/81536034

前端实现简单模糊搜索相关推荐

前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
飞冰 - 让前端开发简单而友好
飞冰 - 让前端开发简单而友好官网:https://ice.work/ 阿里巴巴飞冰(ICE)的 GUI 构建工具 ICEWORKS 安装GUI工具之后,即安装安装 iceworks,n ...
模块化加载_前端模块化简单总结
来源 | http://www.fly63.com/article/detial/9827 前言 JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU.浏览器性能得到了极大的提升,很多页 ...
说学习前端开发简单，如何才能成功上岸？
因为前端难度被严重低估了. 有些人啊,前端三驾马车都还没学完呢,就磨刀霍霍向大厂了.拿不到offer,自然就放弃了呗. 对于业内人士来说,学会CSS/JavaScript/HTML(又称前端三驾马车) ...
markdown在前端的简单使用
目录前言一.引用editor.md进行markdown编辑器使用介绍使用准备二.开始使用创建查看修改编辑三.总结与感悟四.最后前言最近女朋友在做一个项目,她想使用markdow ...
一名菜鸟程序猿对前端的简单理解及介绍
目录前言一.做前端要用到哪些技术? 1.HTML 2.CSS 3.JavaScript 二.一些其他的工具或技术 1.PhotoShop 2.Postman 3.Visual Studio Cod ...
来自菜鸡的前端权限简单实现
写在前面:作为一个菜鸡,关于权限这一块,只接触了vue-element-admin.若依(前后端分离版)这两个后台模板,踩了很多坑以后,也摸索出了一点经验. 关于菜单动态渲染我使用了两个方法: 1. ...
纯前端实现简单的增删改查
项目检查需要一个简单的增删改查页面,不对接后台,纯前端实现.代码如下: <template><div class="bodyViewBox"><div ...

前端实现简单模糊搜索

前端实现简单模糊搜索相关推荐

最新文章

热门文章