效果
一、城市数据
{"A":[{"id":"210300","name":"鞍山","fullName":"鞍山市","initialsName":"A"},{"id":"340800","name":"安庆","fullName":"安庆市","initialsName":"A"},{"id":"410500","name":"安阳","fullName":"安阳市","initialsName":"A"},{"id":"520400","name":"安顺","fullName":"安顺市","initialsName":"A"},{"id":"610900","name":"安康","fullName":"安康市","initialsName":"A"},{"id":"659002","name":"阿拉尔","fullName":"阿拉尔市","initialsName":"A"}],"B":[{"id":"110000","name":"北京","fullName":"北京市","initialsName":"B"},{"id":"130600","name":"保定","fullName":"保定市","initialsName":"B"},{"id":"150200","name":"包头","fullName":"包头市","initialsName":"B"},{"id":"150800","name":"巴彦淖尔","fullName":"巴彦淖尔市","initialsName":"B"},{"id":"210500","name":"本溪","fullName":"本溪市","initialsName":"B"},{"id":"220600","name":"白山","fullName":"白山市","initialsName":"B"},{"id":"220800","name":"白城","fullName":"白城市","initialsName":"B"},{"id":"340300","name":"蚌埠","fullName":"蚌埠市","initialsName":"B"},{"id":"341600","name":"亳州","fullName":"亳州市","initialsName":"B"},{"id":"371600","name":"滨州","fullName":"滨州市","initialsName":"B"},{"id":"450500","name":"北海","fullName":"北海市","initialsName":"B"},{"id":"451000","name":"百色","fullName":"百色市","initialsName":"B"},{"id":"511900","name":"巴中","fullName":"巴中市","initialsName":"B"},{"id":"520500","name":"毕节","fullName":"毕节市","initialsName":"B"},{"id":"530500","name":"保山","fullName":"保山市","initialsName":"B"},{"id":"610300","name":"宝鸡","fullName":"宝鸡市","initialsName":"B"},{"id":"620400","name":"白银","fullName":"白银市","initialsName":"B"},{"id":"659005","name":"北屯","fullName":"北屯市","initialsName":"B"}],"C":[{"id":"500000","name":"重庆","fullName":"重庆市","initialsName":"C"},{"id":"130800","name":"承德","fullName":"承德市","initialsName":"C"},{"id":"130900","name":"沧州","fullName":"沧州市","initialsName":"C"},{"id":"140400","name":"长治","fullName":"长治市","initialsName":"C"},{"id":"150400","name":"赤峰","fullName":"赤峰市","initialsName":"C"},{"id":"211300","name":"朝阳","fullName":"朝阳市","initialsName":"C"},{"id":"220100","name":"长春","fullName":"长春市","initialsName":"C"},{"id":"320400","name":"常州","fullName":"常州市","initialsName":"C"},{"id":"341100","name":"滁州","fullName":"滁州市","initialsName":"C"},{"id":"341700","name":"池州","fullName":"池州市","initialsName":"C"},{"id":"430100","name":"长沙","fullName":"长沙市","initialsName":"C"},{"id":"430700","name":"常德","fullName":"常德市","initialsName":"C"},{"id":"431000","name":"郴州","fullName":"郴州市","initialsName":"C"},{"id":"445100","name":"潮州","fullName":"潮州市","initialsName":"C"},{"id":"451400","name":"崇左","fullName":"崇左市","initialsName":"C"},{"id":"510100","name":"成都","fullName":"成都市","initialsName":"C"},{"id":"540300","name":"昌都","fullName":"昌都市","initialsName":"C"}],"D":[{"id":"139001","name":"定州","fullName":"定州市","initialsName":"D"},{"id":"140200","name":"大同","fullName":"大同市","initialsName":"D"},{"id":"210200","name":"大连","fullName":"大连市","initialsName":"D"},{"id":"210600","name":"丹东","fullName":"丹东市","initialsName":"D"},{"id":"230600","name":"大庆","fullName":"大庆市","initialsName":"D"},{"id":"370500","name":"东营","fullName":"东营市","initialsName":"D"},{"id":"371400","name":"德州","fullName":"德州市","initialsName":"D"},{"id":"441900","name":"东莞","fullName":"东莞市","initialsName":"D"},{"id":"460400","name":"儋州","fullName":"儋州市","initialsName":"D"},{"id":"469007","name":"东方","fullName":"东方市","initialsName":"D"},{"id":"510600","name":"德阳","fullName":"德阳市","initialsName":"D"},{"id":"511700","name":"达州","fullName":"达州市","initialsName":"D"},{"id":"621100","name":"定西","fullName":"定西市","initialsName":"D"}],"E":[{"id":"150600","name":"鄂尔多斯","fullName":"鄂尔多斯市","initialsName":"E"},{"id":"420700","name":"鄂州","fullName":"鄂州市","initialsName":"E"}],"F":[{"id":"210400","name":"抚顺","fullName":"抚顺市","initialsName":"F"},{"id":"210900","name":"阜新","fullName":"阜新市","initialsName":"F"},{"id":"341200","name":"阜阳","fullName":"阜阳市","initialsName":"F"},{"id":"350100","name":"福州","fullName":"福州市","initialsName":"F"},{"id":"361000","name":"抚州","fullName":"抚州市","initialsName":"F"},{"id":"440600","name":"佛山","fullName":"佛山市","initialsName":"F"},{"id":"450600","name":"防城港","fullName":"防城港市","initialsName":"F"}],"G":[{"id":"360700","name":"赣州","fullName":"赣州市","initialsName":"G"},{"id":"440100","name":"广州","fullName":"广州市","initialsName":"G"},{"id":"450300","name":"桂林","fullName":"桂林市","initialsName":"G"},{"id":"450800","name":"贵港","fullName":"贵港市","initialsName":"G"},{"id":"510800","name":"广元","fullName":"广元市","initialsName":"G"},{"id":"511600","name":"广安","fullName":"广安市","initialsName":"G"},{"id":"520100","name":"贵阳","fullName":"贵阳市","initialsName":"G"},{"id":"640400","name":"固原","fullName":"固原市","initialsName":"G"},{"id":"710200","name":"高雄","fullName":"高雄市","initialsName":"G"}],"H":[{"id":"130400","name":"邯郸","fullName":"邯郸市","initialsName":"H"},{"id":"131100","name":"衡水","fullName":"衡水市","initialsName":"H"},{"id":"150100","name":"呼和浩特","fullName":"呼和浩特市","initialsName":"H"},{"id":"150700","name":"呼伦贝尔","fullName":"呼伦贝尔市","initialsName":"H"},{"id":"211400","name":"葫芦岛","fullName":"葫芦岛市","initialsName":"H"},{"id":"230100","name":"哈尔滨","fullName":"哈尔滨市","initialsName":"H"},{"id":"230400","name":"鹤岗","fullName":"鹤岗市","initialsName":"H"},{"id":"231100","name":"黑河","fullName":"黑河市","initialsName":"H"},{"id":"320800","name":"淮安","fullName":"淮安市","initialsName":"H"},{"id":"330100","name":"杭州","fullName":"杭州市","initialsName":"H"},{"id":"330500","name":"湖州","fullName":"湖州市","initialsName":"H"},{"id":"340100","name":"合肥","fullName":"合肥市","initialsName":"H"},{"id":"340400","name":"淮南","fullName":"淮南市","initialsName":"H"},{"id":"340600","name":"淮北","fullName":"淮北市","initialsName":"H"},{"id":"341000","name":"黄山","fullName":"黄山市","initialsName":"H"},{"id":"371700","name":"菏泽","fullName":"菏泽市","initialsName":"H"},{"id":"410600","name":"鹤壁","fullName":"鹤壁市","initialsName":"H"},{"id":"420200","name":"黄石","fullName":"黄石市","initialsName":"H"},{"id":"421100","name":"黄冈","fullName":"黄冈市","initialsName":"H"},{"id":"430400","name":"衡阳","fullName":"衡阳市","initialsName":"H"},{"id":"431200","name":"怀化","fullName":"怀化市","initialsName":"H"},{"id":"441300","name":"惠州","fullName":"惠州市","initialsName":"H"},{"id":"441600","name":"河源","fullName":"河源市","initialsName":"H"},{"id":"451100","name":"贺州","fullName":"贺州市","initialsName":"H"},{"id":"451200","name":"河池","fullName":"河池市","initialsName":"H"},{"id":"460100","name":"海口","fullName":"海口市","initialsName":"H"},{"id":"610700","name":"汉中","fullName":"汉中市","initialsName":"H"},{"id":"630200","name":"海东","fullName":"海东市","initialsName":"H"},{"id":"650500","name":"哈密","fullName":"哈密市","initialsName":"H"}],"J":[{"id":"140500","name":"晋城","fullName":"晋城市","initialsName":"J"},{"id":"140700","name":"晋中","fullName":"晋中市","initialsName":"J"},{"id":"210700","name":"锦州","fullName":"锦州市","initialsName":"J"},{"id":"220200","name":"吉林","fullName":"吉林市","initialsName":"J"},{"id":"230300","name":"鸡西","fullName":"鸡西市","initialsName":"J"},{"id":"230800","name":"佳木斯","fullName":"佳木斯市","initialsName":"J"},{"id":"330400","name":"嘉兴","fullName":"嘉兴市","initialsName":"J"},{"id":"330700","name":"金华","fullName":"金华市","initialsName":"J"},{"id":"360200","name":"景德镇","fullName":"景德镇市","initialsName":"J"},{"id":"360400","name":"九江","fullName":"九江市","initialsName":"J"},{"id":"360800","name":"吉安","fullName":"吉安市","initialsName":"J"},{"id":"370100","name":"济南","fullName":"济南市","initialsName":"J"},{"id":"370800","name":"济宁","fullName":"济宁市","initialsName":"J"},{"id":"410800","name":"焦作","fullName":"焦作市","initialsName":"J"},{"id":"419001","name":"济源","fullName":"济源市","initialsName":"J"},{"id":"420800","name":"荆门","fullName":"荆门市","initialsName":"J"},{"id":"421000","name":"荆州","fullName":"荆州市","initialsName":"J"},{"id":"440700","name":"江门","fullName":"江门市","initialsName":"J"},{"id":"445200","name":"揭阳","fullName":"揭阳市","initialsName":"J"},{"id":"620200","name":"嘉峪关","fullName":"嘉峪关市","initialsName":"J"},{"id":"620300","name":"金昌","fullName":"金昌市","initialsName":"J"},{"id":"620900","name":"酒泉","fullName":"酒泉市","initialsName":"J"},{"id":"710700","name":"基隆","fullName":"基隆市","initialsName":"J"},{"id":"710900","name":"嘉义","fullName":"嘉义市","initialsName":"J"}],"K":[{"id":"410200","name":"开封","fullName":"开封市","initialsName":"K"},{"id":"530100","name":"昆明","fullName":"昆明市","initialsName":"K"},{"id":"650200","name":"克拉玛依","fullName":"克拉玛依市","initialsName":"K"},{"id":"659008","name":"可克达拉","fullName":"可克达拉市","initialsName":"K"},{"id":"659009","name":"昆玉","fullName":"昆玉市","initialsName":"K"}],"L":[{"id":"131000","name":"廊坊","fullName":"廊坊市","initialsName":"L"},{"id":"141000","name":"临汾","fullName":"临汾市","initialsName":"L"},{"id":"141100","name":"吕梁","fullName":"吕梁市","initialsName":"L"},{"id":"211000","name":"辽阳","fullName":"辽阳市","initialsName":"L"},{"id":"220400","name":"辽源","fullName":"辽源市","initialsName":"L"},{"id":"320700","name":"连云港","fullName":"连云港市","initialsName":"L"},{"id":"331100","name":"丽水","fullName":"丽水市","initialsName":"L"},{"id":"341500","name":"六安","fullName":"六安市","initialsName":"L"},{"id":"350800","name":"龙岩","fullName":"龙岩市","initialsName":"L"},{"id":"371200","name":"莱芜","fullName":"莱芜市","initialsName":"L"},{"id":"371300","name":"临沂","fullName":"临沂市","initialsName":"L"},{"id":"371500","name":"聊城","fullName":"聊城市","initialsName":"L"},{"id":"410300","name":"洛阳","fullName":"洛阳市","initialsName":"L"},{"id":"411100","name":"漯河","fullName":"漯河市","initialsName":"L"},{"id":"431300","name":"娄底","fullName":"娄底市","initialsName":"L"},{"id":"450200","name":"柳州","fullName":"柳州市","initialsName":"L"},{"id":"451300","name":"来宾","fullName":"来宾市","initialsName":"L"},{"id":"510500","name":"泸州","fullName":"泸州市","initialsName":"L"},{"id":"511100","name":"乐山","fullName":"乐山市","initialsName":"L"},{"id":"520200","name":"六盘水","fullName":"六盘水市","initialsName":"L"},{"id":"530700","name":"丽江","fullName":"丽江市","initialsName":"L"},{"id":"530900","name":"临沧","fullName":"临沧市","initialsName":"L"},{"id":"540100","name":"拉萨","fullName":"拉萨市","initialsName":"L"},{"id":"540400","name":"林芝","fullName":"林芝市","initialsName":"L"},{"id":"620100","name":"兰州","fullName":"兰州市","initialsName":"L"},{"id":"621200","name":"陇南","fullName":"陇南市","initialsName":"L"}],"M":[{"id":"231000","name":"牡丹江","fullName":"牡丹江市","initialsName":"M"},{"id":"340500","name":"马鞍山","fullName":"马鞍山市","initialsName":"M"},{"id":"440900","name":"茂名","fullName":"茂名市","initialsName":"M"},{"id":"441400","name":"梅州","fullName":"梅州市","initialsName":"M"},{"id":"510700","name":"绵阳","fullName":"绵阳市","initialsName":"M"},{"id":"511400","name":"眉山","fullName":"眉山市","initialsName":"M"}],"N":[{"id":"320100","name":"南京","fullName":"南京市","initialsName":"N"},{"id":"320600","name":"南通","fullName":"南通市","initialsName":"N"},{"id":"330200","name":"宁波","fullName":"宁波市","initialsName":"N"},{"id":"350700","name":"南平","fullName":"南平市","initialsName":"N"},{"id":"350900","name":"宁德","fullName":"宁德市","initialsName":"N"},{"id":"360100","name":"南昌","fullName":"南昌市","initialsName":"N"},{"id":"411300","name":"南阳","fullName":"南阳市","initialsName":"N"},{"id":"450100","name":"南宁","fullName":"南宁市","initialsName":"N"},{"id":"511000","name":"内江","fullName":"内江市","initialsName":"N"},{"id":"511300","name":"南充","fullName":"南充市","initialsName":"N"}],"P":[{"id":"211100","name":"盘锦","fullName":"盘锦市","initialsName":"P"},{"id":"350300","name":"莆田","fullName":"莆田市","initialsName":"P"},{"id":"360300","name":"萍乡","fullName":"萍乡市","initialsName":"P"},{"id":"410400","name":"平顶山","fullName":"平顶山市","initialsName":"P"},{"id":"410900","name":"濮阳","fullName":"濮阳市","initialsName":"P"},{"id":"510400","name":"攀枝花","fullName":"攀枝花市","initialsName":"P"},{"id":"530800","name":"普洱","fullName":"普洱市","initialsName":"P"},{"id":"620800","name":"平凉","fullName":"平凉市","initialsName":"P"}],"Q":[{"id":"130300","name":"秦皇岛","fullName":"秦皇岛市","initialsName":"Q"},{"id":"230200","name":"齐齐哈尔","fullName":"齐齐哈尔市","initialsName":"Q"},{"id":"230900","name":"七台河","fullName":"七台河市","initialsName":"Q"},{"id":"330800","name":"衢州","fullName":"衢州市","initialsName":"Q"},{"id":"350500","name":"泉州","fullName":"泉州市","initialsName":"Q"},{"id":"370200","name":"青岛","fullName":"青岛市","initialsName":"Q"},{"id":"429005","name":"潜江","fullName":"潜江市","initialsName":"Q"},{"id":"441800","name":"清远","fullName":"清远市","initialsName":"Q"},{"id":"450700","name":"钦州","fullName":"钦州市","initialsName":"Q"},{"id":"469002","name":"琼海","fullName":"琼海市","initialsName":"Q"},{"id":"530300","name":"曲靖","fullName":"曲靖市","initialsName":"Q"},{"id":"621000","name":"庆阳","fullName":"庆阳市","initialsName":"Q"}],"R":[{"id":"371100","name":"日照","fullName":"日照市","initialsName":"R"},{"id":"540200","name":"日喀则","fullName":"日喀则市","initialsName":"R"}],"S":[{"id":"310000","name":"上海","fullName":"上海市","initialsName":"S"},{"id":"130100","name":"石家庄","fullName":"石家庄市","initialsName":"S"},{"id":"140600","name":"朔州","fullName":"朔州市","initialsName":"S"},{"id":"210100","name":"沈阳","fullName":"沈阳市","initialsName":"S"},{"id":"220300","name":"四平","fullName":"四平市","initialsName":"S"},{"id":"220700","name":"松原","fullName":"松原市","initialsName":"S"},{"id":"230500","name":"双鸭山","fullName":"双鸭山市","initialsName":"S"},{"id":"231200","name":"绥化","fullName":"绥化市","initialsName":"S"},{"id":"320500","name":"苏州","fullName":"苏州市","initialsName":"S"},{"id":"321300","name":"宿迁","fullName":"宿迁市","initialsName":"S"},{"id":"330600","name":"绍兴","fullName":"绍兴市","initialsName":"S"},{"id":"341300","name":"宿州","fullName":"宿州市","initialsName":"S"},{"id":"350400","name":"三明","fullName":"三明市","initialsName":"S"},{"id":"361100","name":"上饶","fullName":"上饶市","initialsName":"S"},{"id":"411200","name":"三门峡","fullName":"三门峡市","initialsName":"S"},{"id":"411400","name":"商丘","fullName":"商丘市","initialsName":"S"},{"id":"420300","name":"十堰","fullName":"十堰市","initialsName":"S"},{"id":"421300","name":"随州","fullName":"随州市","initialsName":"S"},{"id":"430500","name":"邵阳","fullName":"邵阳市","initialsName":"S"},{"id":"440200","name":"韶关","fullName":"韶关市","initialsName":"S"},{"id":"440300","name":"深圳","fullName":"深圳市","initialsName":"S"},{"id":"440500","name":"汕头","fullName":"汕头市","initialsName":"S"},{"id":"441500","name":"汕尾","fullName":"汕尾市","initialsName":"S"},{"id":"460200","name":"三亚","fullName":"三亚市","initialsName":"S"},{"id":"460300","name":"三沙","fullName":"三沙市","initialsName":"S"},{"id":"510900","name":"遂宁","fullName":"遂宁市","initialsName":"S"},{"id":"540500","name":"山南","fullName":"山南市","initialsName":"S"},{"id":"611000","name":"商洛","fullName":"商洛市","initialsName":"S"},{"id":"640200","name":"石嘴山","fullName":"石嘴山市","initialsName":"S"},{"id":"659001","name":"石河子","fullName":"石河子市","initialsName":"S"},{"id":"659007","name":"双河","fullName":"双河市","initialsName":"S"}],"T":[{"id":"120000","name":"天津","fullName":"天津市","initialsName":"T"},{"id":"130200","name":"唐山","fullName":"唐山市","initialsName":"T"},{"id":"140100","name":"太原","fullName":"太原市","initialsName":"T"},{"id":"150500","name":"通辽","fullName":"通辽市","initialsName":"T"},{"id":"211200","name":"铁岭","fullName":"铁岭市","initialsName":"T"},{"id":"220500","name":"通化","fullName":"通化市","initialsName":"T"},{"id":"321200","name":"泰州","fullName":"泰州市","initialsName":"T"},{"id":"331000","name":"台州","fullName":"台州市","initialsName":"T"},{"id":"340700","name":"铜陵","fullName":"铜陵市","initialsName":"T"},{"id":"370900","name":"泰安","fullName":"泰安市","initialsName":"T"},{"id":"429006","name":"天门","fullName":"天门市","initialsName":"T"},{"id":"520600","name":"铜仁","fullName":"铜仁市","initialsName":"T"},{"id":"610200","name":"铜川","fullName":"铜川市","initialsName":"T"},{"id":"620500","name":"天水","fullName":"天水市","initialsName":"T"},{"id":"650400","name":"吐鲁番","fullName":"吐鲁番市","initialsName":"T"},{"id":"659003","name":"图木舒克","fullName":"图木舒克市","initialsName":"T"},{"id":"659006","name":"铁门关","fullName":"铁门关市","initialsName":"T"},{"id":"710100","name":"台北","fullName":"台北市","initialsName":"T"},{"id":"710300","name":"台南","fullName":"台南市","initialsName":"T"},{"id":"710400","name":"台中","fullName":"台中市","initialsName":"T"},{"id":"711400","name":"桃园","fullName":"桃园市","initialsName":"T"}],"W":[{"id":"150300","name":"乌海","fullName":"乌海市","initialsName":"W"},{"id":"150900","name":"乌兰察布","fullName":"乌兰察布市","initialsName":"W"},{"id":"320200","name":"无锡","fullName":"无锡市","initialsName":"W"},{"id":"330300","name":"温州","fullName":"温州市","initialsName":"W"},{"id":"340200","name":"芜湖","fullName":"芜湖市","initialsName":"W"},{"id":"370700","name":"潍坊","fullName":"潍坊市","initialsName":"W"},{"id":"371000","name":"威海","fullName":"威海市","initialsName":"W"},{"id":"420100","name":"武汉","fullName":"武汉市","initialsName":"W"},{"id":"450400","name":"梧州","fullName":"梧州市","initialsName":"W"},{"id":"469001","name":"五指山","fullName":"五指山市","initialsName":"W"},{"id":"469005","name":"文昌","fullName":"文昌市","initialsName":"W"},{"id":"469006","name":"万宁","fullName":"万宁市","initialsName":"W"},{"id":"610500","name":"渭南","fullName":"渭南市","initialsName":"W"},{"id":"620600","name":"武威","fullName":"武威市","initialsName":"W"},{"id":"640300","name":"吴忠","fullName":"吴忠市","initialsName":"W"},{"id":"650100","name":"乌鲁木齐","fullName":"乌鲁木齐市","initialsName":"W"},{"id":"659004","name":"五家渠","fullName":"五家渠市","initialsName":"W"}],"X":[{"id":"130500","name":"邢台","fullName":"邢台市","initialsName":"X"},{"id":"139002","name":"辛集","fullName":"辛集市","initialsName":"X"},{"id":"140900","name":"忻州","fullName":"忻州市","initialsName":"X"},{"id":"320300","name":"徐州","fullName":"徐州市","initialsName":"X"},{"id":"341800","name":"宣城","fullName":"宣城市","initialsName":"X"},{"id":"350200","name":"厦门","fullName":"厦门市","initialsName":"X"},{"id":"360500","name":"新余","fullName":"新余市","initialsName":"X"},{"id":"410700","name":"新乡","fullName":"新乡市","initialsName":"X"},{"id":"411000","name":"许昌","fullName":"许昌市","initialsName":"X"},{"id":"411500","name":"信阳","fullName":"信阳市","initialsName":"X"},{"id":"420600","name":"襄阳","fullName":"襄阳市","initialsName":"X"},{"id":"420900","name":"孝感","fullName":"孝感市","initialsName":"X"},{"id":"421200","name":"咸宁","fullName":"咸宁市","initialsName":"X"},{"id":"429004","name":"仙桃","fullName":"仙桃市","initialsName":"X"},{"id":"430300","name":"湘潭","fullName":"湘潭市","initialsName":"X"},{"id":"610100","name":"西安","fullName":"西安市","initialsName":"X"},{"id":"610400","name":"咸阳","fullName":"咸阳市","initialsName":"X"},{"id":"630100","name":"西宁","fullName":"西宁市","initialsName":"X"},{"id":"710800","name":"新竹","fullName":"新竹市","initialsName":"X"},{"id":"711100","name":"新北","fullName":"新北市","initialsName":"X"}],"Y":[{"id":"140300","name":"阳泉","fullName":"阳泉市","initialsName":"Y"},{"id":"140800","name":"运城","fullName":"运城市","initialsName":"Y"},{"id":"210800","name":"营口","fullName":"营口市","initialsName":"Y"},{"id":"230700","name":"伊春","fullName":"伊春市","initialsName":"Y"},{"id":"320900","name":"盐城","fullName":"盐城市","initialsName":"Y"},{"id":"321000","name":"扬州","fullName":"扬州市","initialsName":"Y"},{"id":"360600","name":"鹰潭","fullName":"鹰潭市","initialsName":"Y"},{"id":"360900","name":"宜春","fullName":"宜春市","initialsName":"Y"},{"id":"370600","name":"烟台","fullName":"烟台市","initialsName":"Y"},{"id":"420500","name":"宜昌","fullName":"宜昌市","initialsName":"Y"},{"id":"430600","name":"岳阳","fullName":"岳阳市","initialsName":"Y"},{"id":"430900","name":"益阳","fullName":"益阳市","initialsName":"Y"},{"id":"431100","name":"永州","fullName":"永州市","initialsName":"Y"},{"id":"441700","name":"阳江","fullName":"阳江市","initialsName":"Y"},{"id":"445300","name":"云浮","fullName":"云浮市","initialsName":"Y"},{"id":"450900","name":"玉林","fullName":"玉林市","initialsName":"Y"},{"id":"511500","name":"宜宾","fullName":"宜宾市","initialsName":"Y"},{"id":"511800","name":"雅安","fullName":"雅安市","initialsName":"Y"},{"id":"530400","name":"玉溪","fullName":"玉溪市","initialsName":"Y"},{"id":"610600","name":"延安","fullName":"延安市","initialsName":"Y"},{"id":"610800","name":"榆林","fullName":"榆林市","initialsName":"Y"},{"id":"640100","name":"银川","fullName":"银川市","initialsName":"Y"}],"Z":[{"id":"130700","name":"张家口","fullName":"张家口市","initialsName":"Z"},{"id":"321100","name":"镇江","fullName":"镇江市","initialsName":"Z"},{"id":"330900","name":"舟山","fullName":"舟山市","initialsName":"Z"},{"id":"350600","name":"漳州","fullName":"漳州市","initialsName":"Z"},{"id":"370300","name":"淄博","fullName":"淄博市","initialsName":"Z"},{"id":"370400","name":"枣庄","fullName":"枣庄市","initialsName":"Z"},{"id":"410100","name":"郑州","fullName":"郑州市","initialsName":"Z"},{"id":"411600","name":"周口","fullName":"周口市","initialsName":"Z"},{"id":"411700","name":"驻马店","fullName":"驻马店市","initialsName":"Z"},{"id":"430200","name":"株洲","fullName":"株洲市","initialsName":"Z"},{"id":"430800","name":"张家界","fullName":"张家界市","initialsName":"Z"},{"id":"440400","name":"珠海","fullName":"珠海市","initialsName":"Z"},{"id":"440800","name":"湛江","fullName":"湛江市","initialsName":"Z"},{"id":"441200","name":"肇庆","fullName":"肇庆市","initialsName":"Z"},{"id":"442000","name":"中山","fullName":"中山市","initialsName":"Z"},{"id":"510300","name":"自贡","fullName":"自贡市","initialsName":"Z"},{"id":"512000","name":"资阳","fullName":"资阳市","initialsName":"Z"},{"id":"520300","name":"遵义","fullName":"遵义市","initialsName":"Z"},{"id":"530600","name":"昭通","fullName":"昭通市","initialsName":"Z"},{"id":"620700","name":"张掖","fullName":"张掖市","initialsName":"Z"},{"id":"640500","name":"中卫","fullName":"中卫市","initialsName":"Z"}]}二、index.js实现
我使用的是网络请求 你测试的时候可以使用上述的城市数据进行渲染
import api from "../../utils/api.js";
const app = getApp();
Page({
data: {
city: '',
cityData: {},
_py: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
//搜索列表
inputVal: '',
hidden: true,
showPy: '★',
selectData: []
},
onLoad: function() {
var that = this;
api.get(app.globalData.cities).then(res => {
if(res){
that.setData({
cityData: res
});
}
})
},
//选择城市
selectCity: function(e) {
var dataset = e.currentTarget.dataset;
api.post(app.globalData.recruitmentInfo, dataset.fullname).then(res => {
wx.setStorageSync('localCity', dataset.fullname)
wx.navigateBack({
delta: 1,
})
})
},
//获取文字信息
getPy: function(e) {
this.setData({
hidden: false,
showPy: e.target.id,
})
},
setPy: function(e) {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
//触发全部开始选择
tStart: function() {
this.setData({
hidden: false
})
},
//触发结束选择
tEnd: function() {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
//输入
input: function(e) {
let cityData = this.data.cityData;
let selectData = [];
if (e.detail.value == '') {
this.setData({
inputVal: e.detail.value,
selectData
});
} else {
for (let i in cityData) {
for (let j in cityData[i]) {
if (cityData[i][j].fullName.includes(e.detail.value)) {
selectData.push(cityData[i][j].fullName)
}
}
}
console.error(selectData);
this.setData({
selectData,
inputVal: e.detail.value,
});
}
},
})三、index.wxml布局实现
<view class="container">
<view class="cu-bar bg-white search">
<view class="search-form round" style='background: #F7F8FB;'>
<text class="cuIcon-search"></text>
<input value='{
{inputVal}}' type="text" bindinput='input' bindfocus='input' placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
</view>
<!-- 搜索 -->
<view style='background:#ffffff' class="searchName" wx:for="{
{selectData}}" wx:key="key" data-fullname="{
{item}}" bindtap='selectCity'>{
{item}}
</view>
<!-- 城市列表 -->
<view wx:if="{
{selectData.length==0}}" else class='list-city'>
<scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{
{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
<!-- <view class='item' wx:if="{
{city!=''}}">
<view class='fullname'>当前定位城市：{
{city}}</view>
</view> -->
<!-- 全部 -->
<view class='item' wx:for="{
{cityData}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
<view class='py' id="{
{idx}}">{
{idx}}</view>
<view class="fullname" wx:for="{
{group}}" wx:key="key" data-fullname="{
{item.fullName}}" bindtap='selectCity'>{
{item.fullName}}
</view>
</view>
</scroll-view>
<!-- 首字母 -->
<view class='city-py'>
<view class='city-py-item' wx:for="{
{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{
{item}}">{
{item}}
</view>
</view>
</view>
</view>
<!--选择显示-->
<view hidden="{
{hidden}}" class="showPy">{
{showPy}}</view>送上一波福利
微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取
四、index.wxss样式实现
page {
height: 100%;
}
.container {
box-sizing: border-box;
height: 100%;
background: #fff;
}
.search-bar {
width: 100%;
height: 100rpx;
line-height: 100rpx;
margin-top: -100rpx;
box-sizing: border-box;
overflow: hidden;
background: rgb(59, 63, 68);
padding: 0 20rpx;
position: relative;
}
.search-bar .clear {
position: absolute;
right: 30rpx;
bottom: 25rpx;
z-index: 2;
height: 50rpx;
width: 50rpx;
opacity: 0.35;
}
.search-bar .split {
padding: 0 30rpx;
color: #555;
}
.search-bar .picker-opts {
box-sizing: border-box;
white-space: nowrap;
font-size: 25rpx;
color: #fff;
float: left;
height: 100rpx;
line-height: 100rpx;
}
.search-bar input {
font-size: 35rpx;
color: #f5f5f5;
height: 100rpx;
line-height: 100rpx;
box-sizing: border-box;
}
.search-bar .placeholder {
font-size: 30rpx;
color: #aaa;
}
.list-detail, .list-city {
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
}
.list-detail .item-nav {
border-bottom: 1rpx solid #eee;
}
.list-detail .title, .history .title {
font-size: 32rpx;
color: #000;
line-height: 45rpx;
}
.list-detail .address, .history .address {
font-size: 28rpx;
color: #aaa;
white-space: normal;
}
/* 城市列表 */
.list-city {
position: relative;
}
.py {
font-family: ArialMT;
font-size: 30rpx;
color: #909399;
letter-spacing: 0;
box-sizing: border-box;
background: #fff;
padding: 30rpx 40rpx 20rpx 40rpx;
}
.fullname {
margin-right: 40rpx;
margin-left: 40rpx;
box-sizing: border-box;
font-size: 30rpx;
color: #555;
padding: 25rpx 0 25rpx 0;
border-bottom: 1rpx solid #f1f2f7;
}
.searchName {
margin-right: 40rpx;
margin-left: 40rpx;
box-sizing: border-box;
font-size: 30rpx;
color: #555;
padding: 25rpx;
border-bottom: 1rpx solid #f1f2f7;
}
.city-py {
position: fixed;
top: 36%;
right: 0;
margin-top: -324rpx;
}
.city-py-item {
margin-top: 14rpx;
font-family: ArialMT;
font-size: 26rpx;
color: #5297ca;
margin-right: 14rpx;
letter-spacing: 0;
}
.showPy {
width: 150rpx;
height: 150rpx;
background: #fff;
border-radius: 15rpx;
line-height: 150rpx;
text-align: center;
font-size: 80rpx;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
color: #333;
box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);
}