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

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
FROM
  city 
WHERE id = 572 

查询结果如图：