城市列表-搜索功能

城市列表的搜索功能【难点】

搜索展示.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)