前端城市选择？看我，你也可以！

实现效果（纯前端）

最近项目刚好碰到，顺带记录分享下给需要的同学，项目是基于vue,ui框架用的是vant ，先来看效果

需求分析

1.由于城市列表，基本数据是不会变的，所以直接度娘了一份城市列表的数据，这样不需要向后端去频繁的请求，在需要的页面做了模块化导入拿到了数据，我搜的是从A-Z排过的，比较符合vant的列表数据规则，可以直接拿来渲染，并且data里面定义变量 city_list 文件是这样的

2.实时搜索，搜索框输入值的时候，当输入框的onchange事件触发时，去拿到值在city_list里面进行查找，但是需要做到模糊查询，比如搜北，需要出现北京，北海等，而不是搜北京才去查，这里做了一定的优化 代码如下

其中showIndexBar变量用于控制是显示搜索结果还是全部的列表，filter 会过滤出为真的结果，indexOf会返回搜索的值在这个字符串里面第一次出现的位置 无的时候返回-1 这都是比较常用的语法，不熟悉的同学可以去熟悉下，因此这样只要包含了我输入的内容，即返回
3.其中当前城市也是用了定位的一些功能实时获取到的，有感兴趣的同学留言下次继续更吧，第一次写，不是很熟悉，有不对的地方请指出～～

一些关于该业务的拓展

2020/05/30 来自一个加班的周六

由于下午bug改的差不多，项目也进行的差不多了，所以想对项目进行一些复盘，也有一些同学问我要城市列表的静态文件，于是索性封装成了一个npm包，由于功能比较简单，目前的稳定版本就是1.0.0，话不多说，开搞 ,打包后的包文件还是很小的，就使用了一些es6的语法，依赖babel，适用于现在主流框架，下面以vue为例

//安装生产依赖
npm i get-citylist --save

// 项目中引入并挂载到vue的原型上 挂载要在new Vue实例之前
import ct from 'get-citylist'
Vue.prototype.$city = ct

// 页面中使用 ，目前就向外暴露了两个api
this.$city.getAllCity()     参数无   返回值：0object 从a-z排序的城市列表
this.$city.queryCity(query)  参数：string  返回值：Array 模糊匹配出来的城市名称

我们看看效果，直接打印出来的

目前就做这两个简单的api，后面有需要会进行维护，大家感兴趣或者有问题的给我留言