微信小程序 实现城市名称拼音搜索框 汉字/拼音（城市区县定位模块）

~ 文末展示项目更新哦 ~

更新II：代码已重构，比文中初始代码更清晰规范，功能不变，如有帮助请star。

---

要实现的效果展示如下

总体思路：

• 首先，数据中，城市对象里，包含其全拼、简拼的属性；
• 然后，逻辑层，找出 能与 输入框输入的字符串 相匹配的 对象；
• 最后，展示层，把所有匹配的城市名都渲染出来。

接下来，我们按步骤来一窥究竟。

首先，是数据

为了举例方便，test.js 中，我们使用简化版的数据：

'use strict’
const cityList = [{ "id": "35", "provincecode": "150000", "city": "\u963f\u62c9\u5584\u76df", "code": "152900", "initial": "A" ,"short": "alashan", "shorter": "als"},
              { "id": "38", "provincecode": "210000", "city": "\u978d\u5c71\u5e02", "code": "210300", "initial": "A" ,"short": "anshan", "shorter": "as"},
              { "id": "105", "provincecode": "340000", "city": "\u5b89\u5e86\u5e02", "code": "340800", "initial": "A" ,"short": "anqing", "shorter": "aq"},
              { "id": "156", "provincecode": "410000", "city": "\u5b89\u9633\u5e02", "code": "410500", "initial": "A" ,"short": "anyang", "shorter": "ay”}]

let finalCityList = []; //用来保存筛选后的结果

其中，cityList是我们的原始数据，它是一个数组，数组元素是以A为拼音首字母的4个城市对象：阿拉善盟、鞍山、安庆、安阳。

目前对我们有用的属性是：

• short 保存了城市名的拼音
• shorter 保存了城市名的简拼
• city 保存了城市名

接着，是逻辑层：

function auto() {
  let inputSd = “Ay” 
  let sd = inputSd.toLowerCase();
  let