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

缺乏、安全感 2022-06-14 06:40 492阅读 0赞

### ~ 文末展示项目更新哦 ~ ###

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

--------------------

要实现的效果展示如下  
![拼音搜索城市名称效果展示全拼简拼][SouthEast]

# 总体思路： #

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

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

# 首先，是数据 #

为了举例方便，`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 保存了城市名

# 接着，是逻辑层： #

我们假设输入框输入的值是 `“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' } ]

接下来，我们考虑

# 在 **展示层** 中渲染 #

渲染逻辑层得到的结果

我们很自然地想到了小程序中的[列表渲染][Link 1]

`cityselector.wxml`

相对应的  
`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: ''
        })
      },

*  加个漂亮的样式

## 相关项目： ##

[微信小程序 城市/区县定位选择器 带拼音搜索 可直接使用][_ _]

![案例展示][SouthEast 1]

## 功能更新 ##

与拼音搜索同理，添加了**汉字搜索**。  
代码详见项目。

## 项目更新： ##

![项目更新展示][SouthEast 2]

### 更新说明： ###

**原功能**

*  自动定位 城市、区县（也支持手动重新定位）
 *  手动 汉字、拼音搜索 城市
 *  亦可通过 侧边栏 选择，城市按拼音首字母排列
 *  选择好城市后，自动显示 辖下区县

**更新内容**

*  实现了首页与城市选择页面之间的数据通信效果
 *  针对真机调试发现的，输入汉字时，输入法行为与开发环境不一致的问题，做了修改优化。
 *  针对定位模块在IOS中，侧面字母条的显示问题，进行了样式优化
 *  优化了demo样式
 *  升级了搜索功能，支持搜索335个城市(及相应级别地区)。截至目前，最新的[国家统计局2016年统计年鉴][2016]中,地级市291个，地级行政区划334个。

### 注： ###

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

[SouthEast]: /images/20220614/51610e2a775d42cd8a077ed3b718b0e6.png
[Link 1]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
[_ _]: https://github.com/BeijiYang/citySelector
[SouthEast 1]: /images/20220614/8ef95572a7c34beb853e32fa1e912358.png
[SouthEast 2]: /images/20220614/76c95c7296b34f5c89ef91bf99ce7c2c.png
[2016]: http://www.stats.gov.cn/tjsj/ndsj/2016/indexch.htm