淘宝收货地址自动补全实现

1.首先需要有一个全国省市县SQL数据库

CREATE TABLE `city` (`id` int(11) NOT NULL DEFAULT '0',`pid` int(11) DEFAULT NULL,`cityname` varchar(255) CHARACTER SET utf8 DEFAULT NULL,`type` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;-- ----------------------------
-- Records of city
-- ----------------------------
INSERT INTO `city` VALUES ('1', '0', '中国', '0');
INSERT INTO `city` VALUES ('2', '1', '北京', '1');
INSERT INTO `city` VALUES ('3', '1', '安徽', '1');
INSERT INTO `city` VALUES ('4', '1', '福建', '1');
INSERT INTO `city` VALUES ('5', '1', '甘肃', '1');
INSERT INTO `city` VALUES ('6', '1', '广东', '1');
INSERT INTO `city` VALUES ('7', '1', '广西', '1');
INSERT INTO `city` VALUES ('8', '1', '贵州', '1');
INSERT INTO `city` VALUES ('9', '1', '海南', '1');
INSERT INTO `city` VALUES ('10', '1', '河北', '1');
INSERT INTO `city` VALUES ('11', '1', '河南', '1');
INSERT INTO `city` VALUES ('12', '1', '黑龙江', '1');
INSERT INTO `city` VALUES ('13', '1', '湖北', '1');
INSERT INTO `city` VALUES ('14', '1', '湖南', '1');
INSERT INTO `city` VALUES ('15', '1', '吉林', '1');
INSERT INTO `city` VALUES ('16', '1', '江苏', '1');
INSERT INTO `city` VALUES ('17', '1', '江西', '1');
INSERT INTO `city` VALUES ('18', '1', '辽宁', '1');

这里提供一个地址：https://blog.csdn.net/qq_38819293/article/details/81610683

2.前端在输入框加入οnchange="myFunction()"事件，当用户输入文字之后向后端发起ajax获取提示的下拉列表。

3.服务端以java为例

/*** @Description:    地名补全* @Author:         flr* @email imguava@163.com* @CreateDate:     2020/4/30 10:44*/public Result placeNameHelp(BasePageReq req) {String inputName = "宝安区";//1.拿到模糊匹配城市列表List<CityEnt> cityEnts = cityDao.selectList(new QueryWrapper<CityEnt>().like("cityname",inputName));//2.遍历列表补全地名List<String> resultList = new ArrayList<>();if (cityEnts != null && ! cityEnts.isEmpty()){for(CityEnt cityEnt : cityEnts){if (cityEnt.getType() == 3){//获取拼接地名:"福建省 - 泉州市 - 永春县"resultList.add(cityDao.getConcatNameTypeLast(cityEnt.getType()));}}}return ResultUtil.success(resultList);}

4.附上拼接sql

SELECT CONCAT((SELECT cityname FROM city WHERE id = (SELECT pid FROM city WHERE id = (SELECT pid FROM city WHERE id = 572 ))),'省 - ',(SELECT cityname FROM city WHERE id = (SELECT pid FROM city WHERE id = 572 )),'市 - ',cityname) AS cname
FROMcity
WHERE id = 572

查询结果如图：

淘宝收货地址自动补全实现相关推荐

Chrome for Android AutoComplete地址栏地址自动补全功能调研和更新
Chrome地址栏地址自动补全功能调研和更新我的博客对应文章地址 Chrome地址栏地址自动补全功能预览补全前提: 1. 使用Gboard输入法 2. Gboard输入法打开了[文字更正]功能里面 ...
仿新浪微博登录的邮箱地址自动补全功能
首先,来看一下登录新浪微博的效果图: 当你开始输入你的电子邮箱前的帐号时,就会出现常用邮箱的列表,并自动补齐. 实现的时候,首先在页面上放一个输入文本框和一个div.将div隐藏: 电子邮件:< ...
使用百度地图实现详细地址自动补全
<!DOCTYPE html> <html> <head><meta name="viewport" content="init ...
小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)
源码直接使用,下载地址 1,下载源码后需要改两个editaddress.js中的参数即可使用. //云市场分配的密钥Id let appKey = "你自己的secretId"; ...
elasticsearch模仿淘宝、京东、百度、谷歌搜索，自动补全、自动完成
Elasticsearch(简称es)是一款功能强大的开源分布式实时搜索引擎,在日志分析.企业级搜索.时序分析等领域有广泛应用,几乎是各大公司搜索分析引擎的开源首选方案.本文不讲废话,不谈理论,目的在 ...
vscode自动填充地址插件_制作VSCODE代码自动补全插件
首先写在前面,我是看了VSCode插件制作:HTML代码自动填充这篇文章后,才基本了解这类vscode插件的编写和配置方法的,所以在文章开头特地声明一下. 首先在本地测试一下补全的信息第一步,你需要 ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
Autocomplete 自动补全（Webform实战篇）
开篇语因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...
一款SQL自动检查神器，再也不用担心SQL出错了，自动补全、回滚等功能大全
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者:最美分享Coder 来源:http://suo.im/6uI ...
editplus配置 linux shell 语法高亮自动补全
1.文件下载我们可以从EditPlus官网的User Files获得不同语言的语法高亮和自动补全文件. Bash版本下载地址为:http://www.editplus.com/dn.php?n=ba ...

淘宝收货地址自动补全实现

淘宝收货地址自动补全实现相关推荐

最新文章

热门文章