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:"暂不支持该城市"}); } }