如何在uniapp中实现城市搜索功能

1. 前言

城市搜索功能是现在非常常见的一种功能，在很多应用中都有涉及。在uniapp中，实现城市搜索功能也是非常容易的，本文将会详细介绍如何在uniapp中实现城市搜索功能。

2. 数据源

实现城市搜索功能需要一个城市数据源，常用的数据源有两种：

通过第三方API获取城市数据

自己维护城市数据 JSON 文件

在此，我们使用自己维护城市数据 JSON 文件的方式来实现城市搜索功能。你可以在Github上找到一个非常全面的城市列表，下载地址是 https://github.com/modood/Administrative-divisions-of-China ，选择json文件即可。

3. 实现

3.1 加载城市数据

我们在 main.js 中加载城市数据：

import cityData from '@/common/cityData.js'
Vue.prototype.$cityData = cityData

其中 $cityData 是挂载到全局的属性名，cityData.js 是我们维护的城市列表 JSON 文件。

为了方便搜索，我们需要对城市列表数据进行处理，将每个城市的拼音全拼和简拼提取出来，代码如下：

let pinyinUtil = require('@/common/pinyinUtil.js')
let cityList = Object.assign({}, this.$cityData)  // 深拷贝一次，防止修改 $cityData 中的数据
Object.keys(cityList).forEach(key => {
  cityList[key].forEach(city => {
    // 将城市名称转换为拼音全拼和简拼
    let pinyin = pinyinUtil.getPinyin(city.name).toLowerCase()
    let py = ''
    pinyin.split(' ').forEach(i => {
      py += i[0]
    })
    city.pinyin = pinyin
    city.py = py
  })
})
Vue.prototype.$cityList = cityList // 将处理好的城市列表数据挂载到全局

这里我们使用了一个第三方库 pinyinUtil.js 来实现汉字转拼音，安装命令为：

npm install pinyin --save

3.2 实现搜索功能

搜索功能的实现需要用到 Input 组件和 v-model 指令。

首先我们在页面上添加一个 Input 组件：

然后在 data 中定义 keyword 数据：

data() {
  return {
    keyword: ''
  }
},

使用 v-model 指令实现双向绑定，每次 keyword 的值发生变化时，都会触发搜索方法：

watch: {
  keyword() {
    this.search()
  }
},
methods: {
  search() {
    // 根据关键字搜索城市
    let list = []
    let keyword = this.keyword.trim().toLowerCase()
    let cityList = this.$cityList
    if (keyword) {
      Object.keys(cityList).forEach(key => {
        cityList[key].forEach(city => {
          if (city.name.indexOf(keyword) !== -1 || city.pinyin.indexOf(keyword) !== -1 || city.py.indexOf(keyword) !== -1) {
            let item = Object.assign({}, city)
            item.parent = key
            list.push(item)
          }
        })
      })
    }
    this.list = list
  }
}

在 search 方法中，首先获取所有城市列表数据，然后遍历每个城市，如果城市名称、拼音全拼或简拼中包含了关键字，就将该城市加入搜索结果列表中。

这里有个细节，我们还需要把每个城市所属的省份或直辖市的名称保存下来，方便后面的展示。我们通过 parent 字段来保存。

3.3 展示搜索结果

最后，我们需要在页面上展示搜索结果。我们使用 v-for 指令来遍历搜索结果列表，并使用 v-show 指令根据搜索结果列表的长度来控制是否展示：

  

    {{ item.name }}，{{ item.parent }}
  

这里我们还定义了一个 select 方法，表示选择某个城市后的操作。这个方法根据场景需求进行编写即可。

4. 总结

到这里，我们就完成了在 uniapp 中实现城市搜索功能的全部流程，通过搜索，用户可以方便快速地找到所需城市名称，提高了用户体验。

通过本文的讲解，希望读者能够掌握在 uniapp 中实现城市搜索功能的方法，同时也希望读者在实际项目开发中能够善用这种功能，为用户带来更好的使用体验。