搜索实现（vue--去哪儿网）

搜索的下拉菜单样式做好之后就是搜索的逻辑实现了
首先给input一个v-model=‘keyword’，实现数据的双向绑定，然后在data中定义一个keyword和一个空数组list

data () {
    return {
      keyword: '',   //搜索的关键词
      list: [],		 //搜索下拉菜单要循环的数组
      timer: null    //截流使用到的定时器
    }
  },

接着使用watch监听keyword数据的变化，同样使用函数截流来提高性能

watch: {
	keyword () {
		if (this.timer) {
			clearTimeout(this.timer)
		}
		if (!this.keyword) {
			list = []   //如果没有搜索的数据，就让list置为空，因为搜索下拉菜单的出现是根据list数组的长度判断的
		}
		this.timer = setTimeout(() => {
			const result = []
			for (let i in this.cities) {
				this.cities[i].forEach((value) => {
					if (value.spell.indexOf(this.keyword) > -1 && value.name.indexOf(this.keyword) > -1) {
						result.push(value)
					}
				})
			}
			this.list = result
		}, 100)
	}
}