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

最新推荐文章于 2019-10-31 16:16:26 发布
最新推荐文章于 2019-10-31 16:16:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： 微信小程序 javascript 文章标签： javascript json 定位模块 城市选择 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beijiyang999/article/details/77985416
版权
本文介绍了一位开发者如何改进微信小程序的城市/区县定位选择模块，使其支持汉字和拼音搜索。通过增加拼音属性以完善数据，解决部分地级市搜索不到的问题。在处理地名格式差异和重复匹配的现象后，实现了更流畅的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果演示

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

gif

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

项目仓库

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

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

改进的问题

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

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

最低0.47元/天 解锁文章
微信小程序 实现城市名称拼音搜索框 汉字/拼音（城市区县定位模块）
Beijiyang
06-12 9661
要实现的效果展示如下 总体思路： 首先，数据中，城市对象里，包含其全拼、简拼的属性； 然后，逻辑层，找出 能与 输入框输入的字符串 相匹配的 对象； 最后，展示层，把所有匹配的城市名都渲染出来。 接下来，我们按步骤来一窥究竟。首先，是数据为了举例方便，test.js 中，我们使用简化版的数据：'use strict’ const cityList = [{ "id": "35", "provinc
citySelector：基于mpvue的微信小程序城市区县定位选择模块汉字拼音搜索可直接使用已更新
02-05
微信小程序城市/区县定位选择器（mpvue版本） 一款开箱即用的小程序城市/区县选择器 前两天在实现一个城市选择器的需求的时候，在github上了同学的开源项目，觉得做的非常不错，不过是基于原生小程序写的，所以就花...
微信小程序-微信小程序 城市区县定位选择器 带拼音搜索 可直接使用
08-06
微信小程序 城市/区县定位选择器 主要功能 自动定位 城市、区县（也支持手动） 输入框内，通过 拼音搜索 城市，支持全拼、简拼 亦可通过 侧边栏 选择，城市按拼音首字母排列 选择好城市后，自动显示辖下 区县 说明 使用（且小程序只能使用）腾讯地图的API 将utils目录中，config.default.js文件改名为config.js 并将其中的key改为自己的腾讯地图key（申请快速且免费） ES6 可 直接作为模块使用，如果对您有帮助，请star 将模块集成到项目时，涉及到不同页面间数据通信的问题,见小程序页面间通信 关于拼音搜索框的实现，见小程序实现拼音搜索框 更新 实现了首页与城市选择页面之间的数据通信效果 针对真机调试发现的，输入汉字时，输入法行为与开发环境不一致的问题，做了修改优化。
城市名称查询
凌云志
08-18 422
在自己项目 build.gradle 中添加这行依赖,SDk版本15以上的 compile 'com.github.andyoom:citypicker:v1.0.4' 然后在总工程的 build.gradle 中的 repositories{} 里面添加 maven {url "https://jitpack.io"} 就可以了
查询城市名称
wangxiaoxiao519的博客
05-03 655
public class F1 extends Fragment { private ViewPager vp; private LinearLayout ll; private List<String> imUrl; private List<View> list; private int num=0; private int time=0;
城市列表-城市汉字搜索和拼音搜索
03-24
Android 城市列表，具有搜索功能---城市汉字搜索和拼音搜索，看了网上的都没得搜索功能，所以完善了下！
微信小程序市区县定位选择模块汉字拼音搜索
08-11
总的来说，"微信小程序市区县定位选择模块汉字拼音搜索"涉及的技术点包括：微信小程序API的使用、地图API的集成、汉字到拼音的转换、模糊搜索算法的实现、用户界面的交互设计以及性能优化策略。通过熟练掌握这些技术...
Android选择城市Demo，可根据拼音、首字母搜索
10-09
博客地址：http://blog.csdn.net/u013700040/article/details/78180096 Android选择城市界面，可以根据城市拼音、首字母搜索
地区、城市插件，支持拼音和中文，英文，简拼搜索
01-08
地区、城市插件、支持拼音和中文、英文、简拼搜索城市。比较全的城市插件。在别人基础上改成了自己想要的。喜欢的就下载吧
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
全国城市名称数据库
04-21
中国城市拼音和汉语对照表
11-20
json文件，key为城市的拼音，value为城市对应的汉语词汇。使用Python语言的接口是： import json with open(r'country.json', encoding = 'utf-8') as json_data: country_dict = json.load(json_data)
移动端城市模糊搜索（按拼音、汉字搜索），编译器:webstorm
04-08
通过VUE+pinyin4js实现城市模糊搜索，支持按 “拼音、汉字”搜索及“热门城市”快捷选取
中国城市列表JSON数据，带拼音，编码
10-19
自己整合补充的城市列表，只到城市级，以拼音首字母进行分组存放，可能缺少部分城市
vue实现城市选择拼音搜索
06-10
vue实现的城市选择，带拼音选择搜索，可以多次反复使用，数据直接请求本地的资源json数据直接请求本地的资源json
处理城市和首字母的问题
qq_39454316的博客
10-31 450
$.ajax({ type: "GEt", url: "http://www.bestqingshan.top/movie/citys.php", dataType: "json", success: function (data) { ...
微信小程序全国城市搜索（可进行城市中文拼音首字母搜索）
liushuanglian的博客
08-30 5365
废话不多说直接上代码 wxml <!--pages/setUpArea/setUpArea.wxml--> <view class="content"> <view class="search"> <input placeholder="请输入城市中文名或拼音" placeholder-class="center" bindinput="bin...
查询城市（可根据汉字、拼音和首字母查询）
12-24 2069
可查询中国所有城市信息，并且支持全称、拼音及首字母模糊查询
根据城市名称检索城市ID，以及省市县（LitePal+RxJava+Retrofit）
qq_37810152的博客
08-12 5149
今天我们要做的是这样一个效果，大家都知道天气预报软件中，必须要一个城市的名称，然后用户根据自己输入的城市，然后弹出检索出来的内容，这样就可以确定是哪个城市。废话不多说，先看下实现的效果，在决定是不是你想要的代码案例。  如果你不想浏览下面的内容，只想要实现的代码，那么就点击这里吧：  https://github.com/immppp/RxJavaForDemo。  好了，效果就像上图所展...
微信小程序城市区县定位选择器：拼音搜索与自动定位功能
标题中提到的“微信小程序-微信小程序 城市区县定位选择器 带拼音搜索 可直接使用”，说明了这款小程序的主要功能是为用户提供一个方便的城市及区县定位选择器，该选择器具备自动定位功能，并支持用户通过拼音搜索...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值