~ 文末展示项目更新哦 ~
更新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