显示下拉的搜索框AutoComplete

今天写vue前端需要一个搜索框，在下拉列表框显示搜索到数据，搜索半天找到了AutoComplete这个组件，完美解决问题，下面说一下这个组件的使用。

 <AutoComplete icon="ios-search" v-model="value1" :data="data1" :filter-method="filterMethod"
  placeholder="输入教师搜索" style="width:350px">
</AutoComplete>
export default {
    data() {
        return {
            value1: '',
            data1: ['陈海峰', '陆晗', '王怀军'],
            value2: '',
            data2: ['计算机一级', '动物学', '马克思']  
        }

    },
    methods:{
        filterMethod (value, option) {
            return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
        }
    }

}
</script>

 <style>
 </style>

其中的参数 value 绑定的值，可使用 v-model 双向绑定
data 自动完成的数据源
用于绑定显示数据，以下为效果图