关于城市遍历

vue项目记录点代码。。。。。

 

1.通过获取后台数据对城市进行分组（根据首字母分组，后台返回数据中带有小写字母）

    postData() { /* 接口方法 */
                let _self = this;
            
                axios({
                    url: '接口地址',
                    data: {},
                    headers: {
                    
                    },
                    target: true,
                }, (res) => {
                    let resData = JSON.parse(res.data)
                    _self.locationCity = resData.locationCity;
                    let cities = JSON.parse(resData.cities);
                    _self.citiesData = cities.data;
                    _self.cityArry = _self.selectCity(cities.data);
                }, (err) => {

                });
            },

2._self.selectCity(cities.data)方法对数据分组

    selectCity(cities) {
                let LetterArryData = [];
                let Letter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                let LetterArry = Letter.split('');
                for(var j = 0; j < LetterArry.length; j++) {
                    let List = j;
                    List = {
                        name: [],
                        letter: LetterArry[j]
                    };
                    LetterArryData.push(List)
                }

                for(var i = 0; i < cities.length; i++) {
                    for(var j = 0; j < LetterArry.length; j++) {
                        if(cities[i].tag.toUpperCase() == LetterArryData[j].letter) {
                            LetterArryData[j].name.push(cities[i])
                        }
                    }
                }

                this.results = LetterArryData;
                return LetterArryData;
            },

3.本地匹配搜索城市

getResult(val) { 
                if(/^[\x00-\xff]/.test(val[0])) { /*首位是字母*/
                    if(!!val) {
                        this.cityArry = [];
                        this.results.map((data) => {
                            if(data.letter == val.toUpperCase()[0]) {
                                this.cityArry.push(data)
                            }
                        })
                    } else {
                        this.cityArry = this.results;
                    }
                } else { /*首位非字母*/
                    this.cityArry = [];
                    let List = {
                        name: [],
                        letter: ''
                    };
                    this.citiesData.map((data) => {
                        if(val.length == 1) {
                            if(data.city[0].indexOf(val) > -1) {
                                List.name.push(data);
                                List.letter = data.tag.toUpperCase()
                            }
                        } else {
                            if(data.city.indexOf(val) > -1) {
                                List.name.push(data);
                                List.letter = data.tag.toUpperCase()
                            }
                        }

                    })
                    this.cityArry.push(List)
                }
            },