vue+element省市区搜索实现

<template>
    <div>
        <div class="searchMap">
            <div :class="['searchName',{activeBox:$store.state.toolBarchild.dinwei}]" @click="precisonMapClick">
                <div>{{$store.state.tooBarChild.cityName}}</div>
                <i class="el-icon-arrow-up" v-if="$store.state.tooBarChild.dinwei"></i>
                <i class="el-icon-arrow-down" v-else></i>
            </div>
        </div>
        <div class="cityName" v-show="$store.state.tooBarChild.dinwei">
            <div class="cityH">
                <div class="dangQian">当前城市:</div>
                <div class="name">{{$store.state.tooBarChild.cityName}}</div>
                <div class="closeSearch" @click="closeHandel">x</div>
            </div>
            <div class="cityList">
                <div :class="['cityLeft',{active:itemHope == index}]" v-for="(item,index) in cityList" :key="index" @click="reMenClick(index)">
                {{item}}
                </div>
            </div>
            //输入框
            <div class="citySearch">
                <el-autocomplete>
                    v-model.trim="state"
                    :fetch-suggestions = "querySearch"
                    :trigger-on-focus="false"
                    @select="handelSelect"
                    class="inlin-input"
                    :popper-append-to-body="false"
                </el-autocomplete>
                <div class="iconSearch" @click="searchClick">
                <i class="el-icon-search"></i>
                </div>
            </div>
            <div class="toolContainer">
                <div class="tabs">
                    <p v-for="(item,index) in firstProvince" :key="index" @click="letterClick(item,index)" :class="['letter',{active:indexProvince== index}]">
                        {{item}}
                    </p>
                </div>

                <div class="province scrollbar" ref="province">
                    <div class="cityProvince" v-for="(item,index) in dataShi" :key="item.id">
                        <div class="cityName" @click="shiHandel(item,index)">{{item.name}}</div>
                        <div class="cityJib">
                            <div class="cityBox" v-for="(k,index) in item.citys" :key="k.id">
                                <div class="cityRight" @click="shiHandel(k,index)">{{k.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//npm i js-pinyin下载
    let pinyin = require("js-pinyin");
    sxport default{
        data(){
            return{
                itemHope:10,
                indexProvince:50,
                cityList:[
                    "上海",
                    "江苏",
                    "安徽",
                    "浙江",
                    "湖北",
                    "河南",
                    "山东",
                    "吉林",
                    "北京"
                ],
                dataShi:[],//省市
                state:"",
                shiArr:{
                    shiCode:"",
                    lng:"",
                    lat:"",
                    name:""

                },
                restaurants:[],
                dataSearchArr:[],
                xzqList:[],
                firstProvince:["A","B","C","F","G","H","J","L","N","Q","S","T","Y","Z"]
            }
        },
        methods:{
            querySearch(queryString,cb){
                let searchArr = [];
                this.restaurants.forEach(item=>{
                    item.citys.forEach(k=>{
                        searchArr.push({
                            value:k.name,
                            lat:k.lat,
                            lng:k.lng,
                            code:k.zoningcode,
                            name:k.name
                        })
                    })
                })
                let restaurants = searchArr;
                let results = queryString?restaurants.filter(this.createFilter):restaurants;
                cb(results);
            },
            createFilter(queryString){
                return restaurants=>{
                    return(
                        restaurants.value.toLowerCase().indexOf(queryString.toLowerCase())!==-1
                    )
                }
            },
            handelSelect(item){
                this.shiArr.shiCode = item.code;
                this.shiArr.lng = item.lng;
                this.shiArr.lat = item.lat;
                this.shiArr.name = item.name;
            },
            closeHandel(){
                this.$store.state.tooBarChild.dinwei = false;
            },
            //搜索点击事件
            searchClick(){
                if(this.state=="")return;
                this.flyDingwei(this.shiArr.lng,this.shiArr.lat);
                this.$store.commit("setCode",this.shiCode);
                this.$store.commit("setCityName",this.shiArr.name);
            },
            //热门城市
            reMenClick(index){
                this.itemHope = index;
                //上海
                if(index == 0){
                    this.$store.state.tooBarChild.cityName = "上海";
                    let [lng,lat] = [121.472644,31.231706];
                    this.flyDingwei(lng,lat);
                    let zoningcode = "310100";
                    this.$store.commit("setCode",zoningcode);
                }
            },
            //渲染数据
            provinceClick(){
                let that = this;
                that.$parent.hdiMap.getProvinceInfo(data=>{
                    data.forEach(item=>{
                        that。provinceChildrenClick(item);
                    })
                })
            },
            provinceChildrenClick(provinceCode){
                pinyin.setOptions({checkPolyphone:false,chaecase:0});
                //添加首字母
                if(provinceCode.name =="重庆"){
                    provinceCode.first ="C";
                }else{
                    provinceCode.first = pinyin.getCamelChars(provinceCode.name).substring(0,1);
                }
                this.hdiMap.getCitysInfo(provinceCode.adcode,data=>{
                    this.dataShi.push({
                        first:provinceCode.first,
                        name:provinceCode.name,
                        lng:provinceCode.lng,
                        lat:provinceCode.lat,
                        citys:data
                    })
                })
                this.restaurants = this.dataShi;
            },
            letterClick(k,index){
                this.indexProvince = index;
                let provinceArray = [];
                let provinceArray02 = [];
                this.$refs.province.scrollTop = 0;
                provinceArray = this.dataShi.filter(value=>{
                    return value.first == k;
                })
                provinceArray02 = this.dataShi.filter(value=>{
                    return value.first!== k;
                })
                let provinceArray03 = [...provinceArray,...provinceArray02];
                this.dataShi = provinceArray03;
            },

            //按省份
            shiHandel(item,index){
                this.itemHope =1000;
                this.flyDingwei(item.lng,item.lat);
                this.$store.commit("setcode",item.zipcode);
                this.$store.commit("setCityName",item.name);
            },
            flyDingwei(lag,lat){
                this.$parent.map.flyTo({
                    center:[lng,lat],
                    zoom:10,
                    bearing:0,
                    speed:3,
                    curve:1,
                    easing:function(t){
                        return t;
                    },
                    essential:true
                })
            }
        }
    }
</script>
<style lang="less" scoped>
   .searchMap{
       position:absolute;
       top:20px;
       right:332px;
       .searchName{
           height:34px;
           line-height:34px;
           display:flex;
           justify-content:center;
           align-item:center;
           background-color:#434343;
           color:#fff;
           font-size:14px;
           letter-spacing:3px;
           cursor:pointer;
           &:hover{
               color:#23D096;
           }
           padding-left:10px;

       }
       .activeBox{
           color:#23D096;
       }
   }
   .cityName{
       position:absolute;
       top:63px;
       right:34px;
       width:340px;
       background-color:#434343;
       padding:0 10px 0 10px;
       .cityH{
           display:flex;
           height:40px;
           line-height:40px;
           font-size:14px;
           border-bottom:1px solid #fff;
           position:relative;
           .dangQian{
               color:#23D096;
           }
           .inputReady{
               background-color:#434343;
               color:#23D096;
               font-size:14px;
                letter-spacing:3px;
           }
           .closeSearch{
               position:absolute;
               right:-1px;
               top:-1px;
               color:#fff,
               cursor:pointer;
               width:30px;
               text-align:center;
           }
       }
       .cityList{
           display:flex;
           flex-wrap:wrap;
           align-item:center;
           height:60px;
           color:#fff;
           cursor:pointer;
           border-bottom:1px solid #fff;
           .cityLeft{
               margin-left:8px;
               letter-spacing:3px;
           }
           .active{
               color:#23D096;
           }

       }
       .citySearch{
           margin-top:15px;
           height:30px;
           line-height:30px;
           display:flex;
           width:340px;
           /deep/.el-input_inner{
               color:#fff;
               background-color:#434343;
               border-color:#fff;
               height:31px;
               line-height:31px;
               outline:none;
               border-right:none;
               border-radius:0;
               width:238px;
           }
           /deep/.el-autocomplete-suggestion{
                border-radius:0;
           }
           /deep/.el-autocomplete-suggestion_wrap{
               padding:0!important;
               background-color:#434343;
           }
           /deep/.el-autocomplete-suggestion_wrap li{
               color:#fff;
           }
           /deep/.el-autocomplete-suggestion li.highlighted{
               color:#23D096;
           }
           /deep/.el-autocomplete-suggestion li:hover{
               background-color:#434343;
           }
           /deep/.el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
               background-color:#434343;
               border:1px solid #fff;
           }
           .iconSearch{
               height:29px;
               line-height:29px;
               background-color:#23D096;
               padding:0 20px;
               color:#fff;
               margin-top:1px;
               border:1px solid #fff;
               border-left:none;
               cursor:pointer;
           }
       }

       .toolContainer{
           margin-right:-10px;
           .tabs{
               font-size:15px;
               color:#fff;
               height:40px;
               line-height:40px;
               display:flex;
               justify-content:spacing-around;
               cursor:pointer;
               border-botton:1px solid #fff;
               .letter{
                   &:hover{
                       color:#23D096;
                   }
               }
               .active{
                   color:#23D096;
               }
           }
           .province{
               overflow-x:hidden;
               max-height:340px;
               .cityProvince{
                   display:flex;
                   .cityName{
                       color:#fff;
                       font-size:15px;
                       min-width:50px;
                       line-height:30px;
                       height:30px;
                       cursor:pointer;
                       font-weight:bold;
                       &:hover{
                           color:#23D096
                       }
                   }
                   .cityJib{
                       display:flex;
                       flex-wrap:wrap;
                       .cityBox{
                           display:flex;
                           font-size:12px;
                           flex-wrap:wrzp;
                           coloe:#fff;
                           .cityRight{
                               height30px;
                               line-height:30px;
                               margin-right:6px;
                               cursor:pointer;
                               &:hover{
                                   color:#23D096;
                               }
                           }
                       }
                   }
               }
           }
       }
   }
    //滚动条样式
    .scrollbar::-webkit-scrollbar{
        width:8px;
        height1px;
    }
    .scrollbar::-webkit-scrollbar-thumb{
        border-radius:10px;
        -webkit-box-shadow:inset  0 0 5px rgba(0,0,0,0.2);
        background:#bfbaba;
    }
        .scrollbar::-webkit-scrollbar-track{
        border-radius:10px;
        -webkit-box-shadow:inset  0 0 5px rgba(0,0,0,0.2);
        background:#bfbaba;
    }







</style>