AutoComplete自动完成分类查询功能

最近在业务里遇到需要在输入框输入的同时，要有搜索提示的需求。因为笔者最近都在做Antdesign的项目，所以就用这个框架来处理，首先来看一下效果：

官方例子

首先Antdesign自己的官网就有示例.

其实这个例子已经满足我们80%的需求了，我们只要在他的基础上增加搜索功能就好了。

效果实现

1.首先查看文档，AutoComplete有一个事件方法：

所以我们就在这个事件上去做搜索功能，完整HTML代码：

<a-auto-complete
    v-model="m.persons"
    @search="handleSearch"
    dropdown-match-select-width="false"
    option-label-prop="value">
      <template slot="dataSource">
        <a-select-opt-group v-for="group in dataSourcePerson" :key="group.title">
          <span slot="label">{{ group.title }} </span>
              <a-select-option v-for="opt in group.children" :key="opt.id" :value="opt.title"> {{ opt.title }} </a-select-option>
           </a-select-opt-group>
      </template>
 </a-auto-complete>

2.然后我们接着去写搜索方法，我的思路是每次input框触发@search方法的时候，改变dataSourcePerson数据源，把匹配到数据源重新赋值到dataSourcePerson就好了。

// 过滤方法，将数组里匹配到的数据然后return
	fifterData (arr, input) {
      let list = []
      if (!arr.length) return []
      arr.forEach(v => {
        if (v.name.indexOf(input) >= 0) {
          list.push(v)
        }
      })
      return list
    },
    handleSearch (input) {
      let xyr = this.fifterData(this.XYR_LIST, input)
      let bhr = this.fifterData(this.BHR_LIST, input)
      let zr = this.fifterData(this.ZR_LIST, input)
      let bar = this.fifterData(this.BAR_LIST, input)
      this.initFormWithData({
        XYR_LIST: xyr,
        BHR_LIST: bhr,
        ZR_LIST: zr,
        BAR_LIST: bar
      })
    },
    initFormWithData (data) {
      this.dataSourcePerson = [
        {
          title: '嫌疑人',
          children: this.getList(data.XYR_LIST)
        },
        {
          title: '被害人',
          children: this.getList(data.BHR_LIST)
        },
        {
          title: '证人',
          children: this.getList(data.ZR_LIST)
        },
        {
          title: '报案人',
          children: this.getList(data.BAR_LIST)
        }
      ]
    },
    getList (arr) {
      let list = []
      arr.forEach(v => {
        list.push({
          id: v.id,
          title: v.name
        })
      })
      return list
    },

代码我就贴了关键的，至此筛选功能便完成了，但是当我满怀期待去试验效果的时候，浏览器又又又又给我抛了个错：

map 报错？第一想到的就是数组报错，但是我查了很久都发现数组没问题呀。就在我逐一debugger的时候，我发现我的“证人”项children竟然是空数组，原来是这个组件不会去帮我们去处理空数据的情况，那就自己处理呗。

3.在给数据源赋值的时候，如果哪项的children 是空数组，那就删去这一项

	for (let i = this.dataSourcePerson.length - 1; i >= 0; i--) {
        let v = this.dataSourcePerson[i]
        if (!v.children.length) {
          this.dataSourcePerson.splice(i, 1)
        }
      }

将这段代码放在initFormWithData方法最后就可以了。