效果演示

在真机预览的画面是非常流畅的

小程序

###支持搜索335个城市(及相应级别地区)。截至目前，最新的国家统计局2016年统计年鉴中,地级市291个，地级行政区划334个。

项目仓库

微信小程序城市/区县定位选择模块汉字/拼音搜索可直接使用

更新注：项目代码已重构。如有帮助请 start。

改进的问题

小程序项目中需要城市区县定位功能，就自己写了个小程序城市/区县定位选择模块，支持汉字、拼音搜索，之前一篇文章介绍了城市名搜索功能的实现。

后发现有的地级市搜不到，必须从侧边栏搜索首字母，再点击选择。原因在于对应城市名-拼音名的JSON数据不全。为了提升用户体验，决定改进下。

思路

目前城市数据的结构：

[...,{ id: '8',  provincecode: '130000',  city: '张家口市',  code: '130700',  initial: 'Z',  short: 'Zhangjiajie' },...]

为了不动代码逻辑，通过仅仅修改数据达到目的，决定在目前城市数据的基础上，增加一条拼音属性。方法是，利用新找的数据，对旧有数据进行匹配和填充。

[...{ label: '张家口Zhangjiakou0313',  name: '张家口',  pinyin: 'Zhangjiakou',  zip: '0313' },...]

问题一

地名格式差异

市
地区
X族自治州

虽然字符串尾部不统一，但地名头部一般不重复，可以考虑只匹配前两个字

...cityObj.map(                  //项目中原有的，待补充的  (item) = {    biggerObj.map(           //后找的，更全的      (bItem) = {        if (item.city.slice(0,2) === bItem.name.slice(0,2)) {          item.short = bItem.pinyin          tempArr.push(item)        }      }    )  })console.log(tempArr.length)           //经过加工，增加了属性的console.log('cityObj:  '+cityObj.length) //项目原有的

输出

347
cityObj: 337

问题二

发现得到的数字竟然比原来长10，说明有重复匹配现象

利用变量计数，发现重复的

let tempArr = []cityObj.map(  (item) = {    let a = 0    biggerObj.map(      (bItem) = {        if ((a === 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {          item.short = bItem.pinyin          tempArr.push(item)          a++        } else if ((a !== 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {           console.log(a)            console.log(item)             console.log(bItem)              console.log("---------------------------")        }      }    )  })

输出

1
{ id: ‘31’,
provincecode: ‘150000’,
city: ‘巴彦淖尔市’,
code: ‘150800’,
initial: ‘B’,
short: ‘Bayannaoer’ }
{ label: ‘巴彦Bayan0451’, name: ‘巴彦’, pinyin: ‘Bayan’, zip: ‘0451’ } ---------------------------
1
{ id: ‘163’,
provincecode: ‘410000’,
city: ‘三门峡市’,
code: ‘411200’,
initial: ‘S’,
short: ‘Sanmenxia’ }
{ label: ‘三门Sanmen0576’,
name: ‘三门’,
pinyin: ‘Sanmen’,
zip: ‘0576’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: ‘0512’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: '0512’ }

335 //经过加工，增加了属性的
cityObj: 337 //项目原有的

由此

发现了重复匹配的，就两三个，手动改了。
看数字，还少了两个，说明长列表里有缺少的，检查一下

  cityObj.map(        (item) = {          let a = 0          biggerObj.map(            (bItem) = {              if (item.city.slice(0,2) === bItem.name.slice(0,2)) {                item.short = bItem.pinyin                tempArr.push(item)                a++              }            }          )if (a===0) { console.log("----------") console.log(item)} }  )

发现是后者缺了这两个
荷泽市
普洱市
手动加上

##导出使用
最后用fs模块导出，保存使用。
关于fs模块的使用，参考这一篇的代码

然后又优化了一下样式