vue js 模糊匹配搜索查询

大家应该平时涉及到查询基本上都是调用后端接口就完事，传入字符串~调用接口~返回数据~~~

但是不少场景也需要前端自己做匹配查询

那么今天就简单做一个吧！

废话不多说 直接上代码：

1. 封装方法：

export function filterSearch({ oldList = [], search = "", key = "value" }) {
  const old_list = [...oldList];
  const new_list = old_list.filter((value) => {
    value.active = value[key] === search;
    return toSearchString(value[key]).indexOf(toSearchString(search)) !== -1;
  });
  if (search) return new_list;
  return old_list;
}

export function toSearchString(value) {
  return String(value).toLowerCase();
}

2. 使用：

    // 输入框的值变化时
    onInput(event) {
      const inputVal = event.detail.value;
      const list = filterSearch({
        search: inputVal,
        oldList: this.list
      });
      this.innerList = list;
    },

innerList：查询后的数组；
oldList：也就是原始数组，在未查询到数据时，innerList会为空数组，需要oldList让数组重复使用；
search：当然就是查询内容了；

不复杂啊 就是个简单的小功能~~~ 平时做业务的时候 想着记录一下 love&peace