对城市名搜索（汉字、拼音）功能的改进 / 小程序城市区县定位模块改进

最新推荐文章于 2023-05-21 23:28:30 发布
VIP文章 最新推荐文章于 2023-05-21 23:28:30 发布
阅读量1.5k 收藏
点赞数
分类专栏： 微信小程序 javascript 文章标签： javascript json 定位模块 城市选择 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beijiyang999/article/details/77985416
版权

效果演示

在真机预览的画面是非常流畅的

gif

###支持搜索335个城市(及相应级别地区)。截至目前，最新的国家统计局2016年统计年鉴中,地级市291个，地级行政区划334个。

项目仓库

微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用

更新 注：项目代码已重构。如有帮助请 start。

改进的问题

小程序项目中需要城市区县定位功能，就自己写了个小程序城市/区县定位选择模块，支持汉字、拼音搜索，之前一篇文章介绍了城市名搜索功能的实现。

后发现有的地级市搜不到，必须从侧边栏搜索首字母，再点

最低0.47元/天 解锁文章
Beijiyang999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 实现城市名称拼音搜索框 汉字/拼音（城市区县定位模块）
Beijiyang
06-12 9333
要实现的效果展示如下 总体思路： 首先，数据中，城市对象里，包含其全拼、简拼的属性； 然后，逻辑层，找出 能与 输入框输入的字符串 相匹配的 对象； 最后，展示层，把所有匹配的城市名都渲染出来。 接下来，我们按步骤来一窥究竟。首先，是数据为了举例方便，test.js 中，我们使用简化版的数据：'use strict’ const cityList = [{ "id": "35", "provinc
带拼音的，城市筛选组件
GardJasmin的博客
09-07 513
基于Vue实现，带拼音以及可搜索的，城市筛选组件
搜索小技巧分享，快速定位所需
乐想屋
06-14 477
学会工具和技巧不是我们的最终目的，用工具和技巧高效解决问题才是我们的目标。本文我们介绍几个浏览器搜索小技巧以及附赠几个数据常用网址：【技巧一：限定搜索网址】：搜索词+空格+sit...
通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
Mcszl的博客
05-21 8448
基于高德地图JS API定位、获取位置信息
深度统一粗排在淘宝主搜索的优化实践
淘系技术
01-06 1841
两阶段排序(粗排-精排)一开始是因系统性能问题提出的排序框架，长期以来粗排的定位一直是精排的退化版本，但我们发现通过一些技术手段，粗排可以在较大的集合上超越精排。通过重新审视粗排和精排的关系和提出全域hitrate这一新的评价体系，再结合采样优化、蒸馏等手段，我们提升了搜索大盘约1.0%的成交金额背景▐概述淘宝主搜索是一个典型的多阶段检索系统，主要分为召回、粗排、精排等阶段。召回阶段，由文本召...
城市列表-城市汉字搜索和拼音搜索
03-24
Android 城市列表，具有搜索功能---城市汉字搜索和拼音搜索，看了网上的都没得搜索功能，所以完善了下！
微信小程序-微信小程序 城市区县定位选择器 带拼音搜索 可直接使用
08-06
微信小程序 城市/区县定位选择器 主要功能 自动定位 城市、区县（也支持手动） 输入框内，通过 拼音搜索 城市，支持全拼、简拼 亦可通过 侧边栏 选择，城市按拼音首字母排列 选择好城市后，自动显示辖下 区县 说明 使用（且小程序只能使用）腾讯地图的API 将utils目录中，config.default.js文件改名为config.js 并将其中的key改为自己的腾讯地图key（申请快速且免费） ES6 可 直接作为模块使用，如果对您有帮助，请star 将模块集成到项目时，涉及到不同页面间数据通信的问题,见小程序页面间通信 关于拼音搜索框的实现，见小程序实现拼音搜索框 更新 实现了首页与城市选择页面之间的数据通信效果 针对真机调试发现的，输入汉字时，输入法行为与开发环境不一致的问题，做了修改优化。
微信小程序全国城市搜索（可进行城市中文拼音首字母搜索）
liushuanglian的博客
08-30 5022
废话不多说直接上代码 wxml <!--pages/setUpArea/setUpArea.wxml--> <view class="content"> <view class="search"> <input placeholder="请输入城市中文名或拼音" placeholder-class="center" bindinput="bin...
全国省市县编码拼音列表
04-09
全国省市县 编码 拼音，拼音缩写列表，方便数据连接。
jquery.autocomplete 用户输入城市名、或拼音即可有匹配的提示
01-05
项目中有一个城市导航，导航上有一个城市搜索，即用户输入城市名、或拼音即可有匹配的提示，方便用户选择。于是乎下载了一个jquery.autocomplete-1.1.3，但引用到项目后，发现几个问题，并相应做了修改： 1.中文输入后，服务端不能正常获取ajax提交的数据（此处，当然可以用相应转码，本人试了n种方便仍改），细看代码发现， 是用 $.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text'); 提交的， 于是改成了我熟悉的提交方式。 $.ajax({url:this.serviceUrl,data:"query="+me.options.params.query,timeout: 5000,success: function(o){me.processResponse(o);}}); 问题立即解决。 猜想，是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。 2.当输入框值发生变化时，onchange事件不灵敏。 于是，添加了一个函数，输入值一但onchange就调用 。 onKeyProcessDefult: function(i) { var me, fn, s, d; me = this; s = me.suggestions[i]; d = me.data[i]; if(this.currentValue!=s || undefined==d){d="";s="";} this.selectedIndex=0; //输入时，一但有匹配的项，就默认选择第一项,这样，再按回车键，即可直接submit提交 jht添加 2011-07-20 $(".auto_selected_val").val(d); } 3. 当输入正确值，而不去选择相应提示项时，按回车键，不能完成自动提交。另外就是，当输入正确值，而不去选择相应提示项进，点击后面的提交按钮，也不能完成提交。（赶集网的城市切换也有这个小瑕疵哦）。 于是修改为，一但输入后只有可匹配的项时，就默认选中第一项（代码如上）。 这样，再提交就不是问题了。 4.输入值，当没有相应匹配项时，没有任何提示，不友好，影响用户体验。 5.服务服端注意返回json格式参数格试哦{ query:'c',suggestions:['北京','保定','包头','本溪'],data:['hr','cu','cy','cz'] } 项目应用实例：http://www.juyuan.com/members/city 参考实案例：http://www.ganji.com/index.htm
微信小程序城市选择及搜索功能的方法
12-07
实现搜索城市功能 参考 微信小程序 之『仿美团城市选择 城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 scrollTopId: '',//置顶id city: "", cit
全国省市区县编码、经纬度、拼音
07-04
全国各省市行政区划编码、经纬度信息、拼音等，SQL文件。 INSERT INTO `s_provinces` VALUES ('100000', '中国', '0', '中国', '0', '', '', '中国', '116.3683244', '39.915085', 'China', '1'); INSERT INTO `s_provinces` VALUES ('110000', '北京', '100000', '北京', '1', '', '', '中国,北京', '116.405285', '39.904989', 'Beijing', '1'); INSERT INTO `s_provinces` VALUES ('110100', '北京市', '110000', '北京', '2', '010', '100000', '中国,北京,北京市', '116.405285', '39.904989', 'Beijing', '1'); INSERT INTO `s_provinces` VALUES ('110101', '东城区', '110100', '东城', '3', '010', '100010', '中国,北京,北京市,东城区', '116.41005', '39.93157', 'Dongcheng', '1'); INSERT INTO `s_provinces` VALUES ('110102', '西城区', '110100', '西城', '3', '010', '100032', '中国,北京,北京市,西城区', '116.36003', '39.9305', 'Xicheng', '1'); INSERT INTO `s_provinces` VALUES ('110105', '朝阳区', '110100', '朝阳', '3', '010', '100020', '中国,北京,北京市,朝阳区', '116.48548', '39.9484', 'Chaoyang', '1'); INSERT INTO `s_provinces` VALUES ('110106', '丰台区', '110100', '丰台', '3', '010', '100071', '中国,北京,北京市,丰台区', '116.28625', '39.8585', 'Fengtai', '1');
citySelector：基于mpvue的微信小程序城市区县定位选择模块汉字拼音搜索可直接使用已更新
02-05
微信小程序城市/区县定位选择器（mpvue版本） 一款开箱即用的小程序城市/区县选择器 前两天在实现一个城市选择器的需求的时候，在github上了同学的开源项目，觉得做的非常不错，不过是基于原生小程序写的，所以就花...
高德地图2021年10月省市区县街道拼音经纬度城市行政区域MYSQL数据
10-26
于是自己花时间重新基于高德地图API接口采集了一份最新的城市区域数据。总计6万多条数据。数据格式如下： INSERT INTO `districts` (`id`, `name`, `pinyin`, `initials`, `letter`, `citycode`, `adcode`, `parent...
全国省份城市区县数据表(areas.sql)
最新发布
11-04
该数据创建了三张表，分别为省份provinces,城市cities,区县areas，也包含了我国不可分割的台湾省。
全国所有省份、城市、区县的Excel汇总表（按首字母进行排序）（3151个）.rar
11-18
全国所有省份、城市、区县的Excel汇总表（按首字母进行排序），包含了各市的下辖区和县，共3151个。
JavaScript 函数防抖（debounce）的实现
热门推荐
Beijiyang
04-06 1万+
函数防抖是什么 函数防抖是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时，是常见的优化，适用于 表单组件输入内容验证 防止多次点击导致表单多次提交 等情况，防止函数过于频繁的不必要的调用。 代码实现 思路 用 setTimeout 实现计时，配合 clearTimeout 实现“重新开始计时”。 即只要触发，就会清除上一个计时器，又注册...
微信小程序 短信验证 功能的实现（附案例代码/前后端/直接用）
Beijiyang
09-07 1万+
模块效果展示（小程序界面）实现的功能小程序端： 请求获取短信验证码 两次请求之间间隔至少一分钟 填写必填内容后，才能提交表单 手机号合法性检验 后台： 接前台请求后，通过阿里云发送短信 生成随机数字验证码（默认6位） 收到提交的表单后，对验证码字段进行判断 验证码是否过期 验证码是否正确 通过验证后，方能进行下一步操作 如保存表单信息至数据库等 结果反馈 说明 项目包含前后端代码，可以直接用，并
uniapp小程序选择城市区县的插件
06-01
Uniapp小程序可以使用第三方的城市选择插件，比如uni-picker-city插件。您可以在官方插件市场（https://ext.dcloud.net.cn/）搜索该插件并安装使用。 该插件支持全国范围内的城市选择，包括省份、城市和区县，具有良好的用户体验和可扩展性。安装使用过程中，您需要按照插件说明进行配置和调用，以实现您具体的业务需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值