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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Beijiyang999/article/details/73135682

~ 文末展示项目更新哦 ~

更新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.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
		            }
              }

返回值转为truefalsefilter( )据此得到全拼中,能和输入字符串相匹配的新数组。赋给临时数组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个。

注:

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

展开阅读全文

没有更多推荐了,返回首页