城市列表的搜索功能【难点】
搜索展示.gif
功能描述 ：在城市选择页面的输入框中输入中文或者英文的模糊查询，会显示对应列表项，匹配不成功会显示搜索不到。
输入绑定v-model的keyword，增加watch函数，监听对keyword的修改。在cities里对每个对象item循环（双重循环）使用indexOf进行模糊查询。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果要检索的字符串值没有出现，则该方法返回 -1，返回值>-1代表匹配到。
keyword (){
if(this.timer){
clearTimeout(this.timer)
}
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);
}
优化1.添加节流 设置定时器
优化2.没有关键词时清除列表 :没有关键词时list清空。
if(!this.keyword){
this.list=[]
return
}
优化3：当list长度为0时才显示提示。
在computed里设置hasNoData函数，没有data时才显示匹配数据，不然在每个搜索结果后都显示。
<li class="search-item" v-show="hasNoData">
没有找到匹配数据，请重新输入！
</li>
hasNoData(){
return !this.list.length
}
优化4：给列表加滚动
this.scroll=new Bscroll(this.$refs.search)
