~ 文末展示项目更新哦 ~

更新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 num = sd.lengthlet 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.citytempObj.code = item.codefinalCityList.push(tempObj)})}else if(tempShorter[0]) {console.log("tempShorter");tempShorter.map(item => {let tempObj = {};tempObj.city = item.citytempObj.code = item.codefinalCityList.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.lengthconst 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.citytestObj.code = item.codefinalCityList.push(testObj)})this.setData({completeList: finalCityList,})}else if(tempShorter[0]) {tempShorter.map(item => {let testObj = {};testObj.city = item.citytestObj.code = item.codefinalCityList.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个。

注：

在项目中发现简拼使用率不高，故在搜索功能的更新中，没有在城市数据添加简拼的属性，但保留了简拼搜索的代码逻辑。可随时看情况恢复功能。

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

微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现 item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击 ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面
微信小程序--好看的radio单选项框第一种效果图如下: .wxss代码: .view_container {display: flex;flex-direction: row;justify-c ...
微信小程序：获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
微信小程序进行蓝牙初始化、搜索附近蓝牙设备及连接指定蓝牙（一）
前言: 微信小程序搜索附近蓝牙设备,必须先进行蓝牙初始化,初始化ok进行搜索附近蓝牙设备.连接指定蓝牙需要deviceId(硬件通过at指令可以查看deviceId) 准备工作: 软件:微信小程序硬 ...
微信小程序结合腾讯位置服务获取用户所在城市信息
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
《微信小程序案例8》实现聊天框下部分别人向我发消息
一.先安装node.js 如若安装时出现磁盘无效的报错信息,以下解决方法 1.win+r 输入subst Y: %TEMP% 2.再次win+r 输入subst Y:/Y Y代表报错时出现的 ...
微信小程序 -- textarea输入时，其框顶在手机输入键盘之上
在微信小程序开发时,textarea进行输入时,会发现其效果如左图,体验感并不是很好.而我们最终需要的效果是如右图,如何实现呢? 其实很简单,只需给textarea加一 ...
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
目录第一步:登录小程序公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:使 ...

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

~ 文末展示项目更新哦 ~

总体思路：

首先，是数据

接着，是逻辑层：

在展示层中渲染

相关项目：

功能更新

项目更新：

更新说明：

注：

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

最新文章

热门文章

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

~ 文末展示项目更新哦 ~

总体思路：

首先，是数据

接着，是逻辑层：

在 展示层 中渲染

相关项目：

功能更新

项目更新：

更新说明：

注：

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

最新文章

热门文章

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

在展示层中渲染

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