前端模糊查询

概念

这里的模糊查询指的是页面级别的模糊查询，即在搜索框输入信息后对页面中的数据进行筛选，而不通过请求接口来完成页面渲染的操作。这种方式常应用于简单页面的搜索，这里拿携程的地址来举例。下图中的输入框在输入文字后就会对页面进行简单的搜索，然后将包含搜索内容的信心展示出来。（可能携程并不是这么做的，此处只是用来举例）

思路

上图的界面大家应该很熟悉了，再往下面就是每一个字母为标题，然后下面有对应着这个字母开头的城市名称列表，前端拿到这个数据对页面进行渲染。而模糊查询实现的方式就是对这个拿到的数据使用filter去遍历筛选包含输入信息的数据，然后用筛选出来的数据更新view层。

代码

掌握思路实现起来就很容易了。 假设数据结构长这样

let data = {
    "cityList": [
        {
            "alphabet": "A",
            "alphabetList": [ { "name": "阿尔山", }, { "name": "阿克苏", }, { "name": "阿拉善", },]
        },
        {
            "alphabet": "B",
            "alphabetList": [{ "name": "巴彦淖尔", }, { "name": "百色", }, { "name": "保山", },]
        },
        {
            "alphabet": "C",
            "alphabetList": [{ "name": "长春", }, { "name": "长沙", }, { "name": "长冶", },]
        },
        {
            "alphabet": "D",
            "alphabetList": [{ "name": "大理", }, { "name": "大连", }, { "name": "大庆", },]
        },
    ]
  } 

在输入框onChange时触发模糊查询事件，这里只写模糊查询逻辑，防抖节流优化等不考虑。

function onQueryChange(v) {
    let newCityList = [];  
    this.cityList.map(cityObj => {
        // 创建搜索后的新城市对象
        let newCityobj = {
            alphabet: cityObj.alphabet,
            alphabetList: cityObj.alphabetList.filter(city => city.name.includes(v))
        }
        // 如果大于0说明有搜到的结果需要展示，就放到新数组里
        if (newCityobj.alphabetList.length > 0) newCityList.push(newCityobj)
    })
    // 将用于更新view层的数据赋值为搜索后的结果
    this.cityList = newCityList;
  }