~ 文末展示项目更新哦 ~
更新II：代码已重构，比文中初始代码更清晰规范，功能不变，如有帮助请star。
要实现的效果展示如下
总体思路：
- 首先，数据中，城市对象里，包含其全拼、简拼的属性；
- 然后，逻辑层，找出 能与 输入框输入的字符串 相匹配的 对象；
- 最后，展示层，把所有匹配的城市名都渲染出来。
接下来，我们按步骤来一窥究竟。
首先，是数据
为了举例方便，test.js 中，我们使用简化版的数据：
'use strict’const cityList = [{ "id": "35", "provincecode": "150000", "city": "u963fu62c9u5584u76df", "code": "152900", "initial": "A" ,"short": "alashan", "shorter": "als"}, { "id": "38", "provincecode": "210000", "city": "u978du5c71u5e02", "code": "210300", "initial": "A" ,"short": "anshan", "shorter": "as"}, { "id": "105", "provincecode": "340000", "city": "u5b89u5e86u5e02", "code": "340800", "initial": "A" ,"short": "anqing", "shorter": "aq"}, { "id": "156", "provincecode": "410000", "city": "u5b89u9633u5e02", "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 num = sd.length let temp = cityList.filter( item => { let test = item.short.slice(0,num) return (test && test == sd) } ); let tempShorter = cityList.filter( itemShorter => { let testShorter = itemShorter.shorter.slice(0,num) return (testShorter && testShorter == sd) } ) if(temp[0]) { //全拼匹配 console.log("temp"); console.log(temp); }else if(tempShorter[0]) { //简拼匹配 console.log("tempShorter"); console.log(tempShorter); }else { return }}我们假设输入框输入的值是 “Ay”
考虑到用户可能输入大写，也可能输入小写，我们用toLowerCase()来排除这种干扰。
接下来，就要用输入的字符串和城市名的拼音做匹配。
要做匹配，那么两边字符串的长度必须是相同的。我们用变量num来保存输入字符串的长度，然后去城市名的全拼、简拼字符串分别截取相同长度的子串。
截取这一步用到了filter( )。它接收一个参数，这个参数是一个函数，返回一个布尔值。filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
我们看作为参数的函数：
item => { let test = item.short.slice(0,num) return (test && test == sd) }对数组中的每一个元素执行这个箭头函数。对该元素的short属性，用slice()切一个子串。如果该子串和存在，并且和输入的字符串相等，则返回。相当于
item => { let test = item.short.slice(0,num) if(test && test == sd){ return item } }返回值转为true或false，filter( )据此得到全拼中，能和输入字符串相匹配的新数组。赋给临时数组temp。
同理，得到简拼中相匹配的临时数组tempShorter。
此时，运行该文件
node test.js得到筛选出的匹配城市的数组：和”Ay”相匹配的是简拼，安阳市
tempShorter[ { id: '156', provincecode: '410000', city: '安阳市', code: '410500', initial: 'A', short: 'anyang', shorter: 'ay' } ]如果把假设的输入值从“Ay”改为”A”，运行，得到结果：所以4个城市的全拼都匹配
temp[ { id: '35', provincecode: '150000', city: '阿拉善盟', code: '152900', initial: 'A', short: 'alashan', shorter: 'als' }, { id: '38', provincecode: '210000', city: '鞍山市', code: '210300', initial: 'A', short: 'anshan', shorter: 'as' }, { id: '105', provincecode: '340000', city: '安庆市', code: '340800', initial: 'A', short: 'anqing', shorter: 'aq' }, { id: '156', provincecode: '410000', city: '安阳市', code: '410500', initial: 'A', short: 'anyang', shorter: 'ay' } ]到此，我们已经实现了对城市的筛选。
因为，在成功地将匹配的城市名渲染出来以后，我们还需要对列表中的项目进行一系列操作，比如点击其中的某个城市，得到其城市名、城市代号等等信息，所以，直接简单地用类似[“A市”，“B市”，“C市”，“D市”]的方法渲染出来是不够的。
我们还需要用对象的形式来展现。
test.js中，做如下修改:
在分别就全拼，简拼做完筛选后，如果临时数组temp（或tempShorter，下同）存在，则用map( ),对数组中的每个元素进行这样的操作：
构建临时对象tempObj，包含两个属性，分别是城市名称 和 城市代码。
然后，将这个对象push( )到 finalCityList数组中。在这个结果数组中，包含了我们之后操作所需要的信息。
test.js
… … if(temp[0]) { console.log("temp"); temp.map( item => { let tempObj = {}; tempObj.city = item.city tempObj.code = item.code finalCityList.push(tempObj) } ) }else if(tempShorter[0]) { console.log("tempShorter"); tempShorter.map( item => { let tempObj = {}; tempObj.city = item.city tempObj.code = item.code finalCityList.push(tempObj) } ); }else { return }}auto();console.log(finalCityList);此时，运行该文件
node test.js得到结果：符合“A”的全拼
temp[ { city: '阿拉善盟', code: '152900' }, { city: '鞍山市', code: '210300' }, { city: '安庆市', code: '340800' }, { city: '安阳市', code: '410500' } ]接下来，我们考虑
在 展示层 中渲染
渲染逻辑层得到的结果
我们很自然地想到了小程序中的列表渲染
cityselector.wxml
<view class="input"><input bindinput="bindKeyInput" placeholder="输入城市名或拼音查询" placeholder-style="font-size: 30rpx" value="{{inputName}}"></input></view><ul wx:for="{{completeList}}" wx:key="index" class="ul"> <li bindtap="bindCity" data-city="{{item.city}}" data-code="{{item.code}}" class="li">{{item.city}}</li></ul>相对应的cityselector.js
Page({ data: { cityList: [这个数组保存城市对象的原始数据], inputName: ‘’, //实时保存input输入的字符串 completeList: [], //保存筛选之后匹配的城市对象 ... }, … … bindKeyInput: function(e) { console.log(e.detail.value); this.setData({ inputName: e.detail.value }) this.auto() }, //自动匹配的函数 auto: function() { let inputSd = this.data.inputName //目前输入框内的信息 let sd = inputSd.toLowerCase(); //大小写 let num = sd.length const cityList = this.data.cityList; let finalCityList = [] let temp = cityList.filter( item => { let text = item.short.slice(0,num) return (text && text == sd) } ); let tempShorter = cityList.filter( itemShorter => { let textShorter = itemShorter.shorter.slice(0,num) return (textShorter && textShorter == sd) } ) if(temp[0]) { temp.map( item => { let testObj = {}; testObj.city = item.city testObj.code = item.code finalCityList.push(testObj) } ) this.setData({ completeList: finalCityList, }) }else if(tempShorter[0]) { tempShorter.map( item => { let testObj = {}; testObj.city = item.city testObj.code = item.code finalCityList.push(testObj) } ); this.setData({ completeList: finalCityList, }) }else { return } },})以上，基本手动完成了微信小程序的 城市名称拼音搜索框
#还需注意，
cityselector.wxml中通过data-*的方式，将相关数据传入，之后才能通过点击事件，在dataset中取到。<input>输入框可以再通过绑定下面这个 失焦触发 的方法，实现 输入框中字符串的及时清空：
bindBlur: function(e) { console.log("bindBlur"); this.setData({ inputName: '' }) }, - 加个漂亮的样式
相关项目：
微信小程序 城市/区县定位选择器 带拼音搜索 可直接使用
功能更新
与拼音搜索同理，添加了汉字搜索。
代码详见项目。
项目更新：
更新说明：
原功能
- 自动定位 城市、区县（也支持手动重新定位）
- 手动 汉字、拼音搜索 城市
- 亦可通过 侧边栏 选择，城市按拼音首字母排列
- 选择好城市后，自动显示 辖下区县
更新内容
- 实现了首页与城市选择页面之间的数据通信效果
- 针对真机调试发现的，输入汉字时，输入法行为与开发环境不一致的问题，做了修改优化。
- 针对定位模块在IOS中，侧面字母条的显示问题，进行了样式优化
- 优化了demo样式
- 升级了搜索功能，支持搜索335个城市(及相应级别地区)。截至目前，最新的国家统计局2016年统计年鉴中,地级市291个，地级行政区划334个。
注：
在项目中发现简拼使用率不高，故在搜索功能的更新中，没有在城市数据添加简拼的属性，但保留了简拼搜索的代码逻辑。可随时看情况恢复功能。
