vue模糊查询

模糊查询匹配结果

<!-- 搜索框 -->
<div class="search-wrapper">
    <input type="text"  placeholder="中文/拼音/首字母" @keyup="autoInput()"/>
</div>
<!-- 搜索结果 -->
<div class="auto-list-con" v-if="autoIsShow">
          <div class="list-name" v-for="item in autoData" @click="selectCityName(item.sta_name)">{{item.sta_name}}
          </div>
</div>

 

autoInput(){//输入框搜索
            const str=event.target.value.toLocaleLowerCase().replace(/\s/g,"");//搜索字符串去空格
            this.autoData.length=0;
            this.autoIsShow=true;

            if(str===''){//如果为空，不展示搜索结果面板
                this.autoIsShow=false;
                return;
            }
            this.Stations.forEach((item,index)=>{ //模糊匹配
                const name=item.sta_name;
                const ename=item.sta_ename || 's';
                if(name.indexOf(str)>=0||ename.indexOf(str)>=0){
                    this.autoData.push(item);
                }
            })
            if(this.autoData.length===0){
                this.autoData.push({sta_name:"暂不支持该城市"});
            }
        }