搜索框实现模糊查询方法 - js

JavaScript029

搜索框实现模糊查询方法 - js,第1张

日常开发中经常会遇到搜索框查询的例子,需要对数组中的元素进行检索并查询出所需的结果,通过如下方式简单实现了一个小的模糊查询,具体如下:

首先,用到了两个方法

1.对数组通过 filter 的方式遍历查询搜索的 key

2.对遍历出的结果进行字符串的模糊查询 str.indexOf("xxx") != -1

其次,通过如上两种方法的组合从而获得一个类似模糊查询的效果;

最后,具体实现 code 如下:

此次实现搭配使用的是该 Vant Search 组件

UI 部分很简单直接根据 demo 实例集成即可。

以上便是此次分享的全部内容,希望能对大家有所帮助!

在输入框输入时,要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。

防抖的实现思路:每次触发事件时都取消之前的延时调用方法:

节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数: