手搭手Ajax实现搜索地址自动补全功能

输入单词后，自动提示出要搜索的信息，点击某个内容后，自动补全至搜索框。

比如：

如何实现搜索自动补全功能

1. 键盘事件：keyup按键弹起事件
2. 发送ajax请求，请求中提交用户输入的搜索内容,后端接收内容后，模糊查询，返回结果list<*>，
3. 查询结果封装json格式的字符串后，将json字符串响应到前端，
4. 前端接收，动态展示

环境介绍

技术栈	springboot+mybatis-plus+mysql
软件	版本
mysql	8
IDEA	IntelliJ IDEA 2022.2.1
JDK	1.8
Spring Boot	2.7.13
mybatis-plus	3.5.3.2

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.15
         
    
    com.example
    ajaxDemo01
    0.0.1-SNAPSHOT
    ajaxDemo01
    ajaxDemo01
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            com.alibaba
            fastjson
            2.0.32
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.5.3.2
        
        
            p6spy
            p6spy
            3.9.1
        
        
            com.mysql
            mysql-connector-j
            runtime
        
        
            com.alibaba
            druid
            1.2.15
        
        
            com.baomidou
            dynamic-datasource-spring-boot-starter
            3.5.0
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            org.projectlombok
            lombok
            1.18.24
        
    
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

application.yml配置文件

spring:
  datasource:
#    username: root
#    password: 111111
#    url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8
#    driver-class-name: com.p6spy.engine.spy.P6SpyDriver
    dynamic:
      primary: sys #设置默认的数据源或者数据源组,默认值即为master
      strict: false #严格匹配数据源,默认false. true未匹配到指定数据源时抛异常,false使用默认数据源
      datasource:
        sys:
          username: root
          password: 111111
          url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8
          driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driver
        wms:
          url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/Wms?useUnicode=true&characterEncoding=UTF-8
          username: root
          password: 111111
          driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driver
        sys2:
          username: root
          password: 111111
          url: jdbc:p6spy:mysql://127.0.0.1:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8
          driver-class-name: com.p6spy.engine.spy.P6SpyDriver

server:
  port: 8083

mybatis-plus:
  configuration:
    #输出日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    #配置映射规则
    map-underscore-to-camel-case: true #表示支持下划线到驼蜂的映射
    #隐藏mybatis图标
  global-config:
    banner: false
    db-config:
      logic-delete-field: status
      logic-not-delete-value: 1
      logic-delete-value: 0
#
#mybatis:
#  mapper-locations=classpath: com/example/dao/*.xml

数据库表

前端页面

    
    
    



搜索地址: 

后端实现

实体类

@TableName(value ="t_address")
@Data
public class TAddress implements Serializable {
    /**
     * 
     */
    @TableId(type = IdType.AUTO)
    private Integer id;

    /**
     * 
     */
    private String address;

    @TableField(exist = false)
    private static final long serialVersionUID = 1L;
}

mapper(dao层)

@Mapper
public interface TAddressMapper extends BaseMapper {
    List getByAddresses(@Param("Data") String data);
}

service

public interface TAddressService extends IService {
    List getAddresses(String data);
}

serviceimpl

@Service
@DS("sys2")
public class TAddressServiceImpl extends ServiceImpl
    implements TAddressService{

    @Autowired
    private TAddressMapper tAddressMapper;

    @Override
    public List getAddresses(String data) {
        return tAddressMapper.getByAddresses(data);
    }
}

controller

@Autowired
    private TAddressServiceImpl tAddressService;

@RequestMapping("/{Data}/Address")
@ResponseBody
public List Address(@PathVariable("Data") String data) {

    List allProvince = tAddressService.getAddresses(data);
    return allProvince;
}

测试类

@Autowired
private TAddressServiceImpl tAddressService;
@Test
void addressTest(){
    List address = tAddressService.list();
    for (TAddress tAddress : address) {
        System.out.println(tAddress.toString());
    }
}

效果

原理基础，可略

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

ajax基础

Xmlhttprequest对象是AJAX的核心对象,发送请求以及接收服务器数据的返回。

Xmlhttprequest对象,现代浏览器都是支持的,都内置了该对象。直接用即可。

XmlHttpRequest对象基本方法：

abort():停止发送当前请求

getAllResponseHeader():获取服务器的全部响应头

getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头

open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密 码，则 提供对应的信息。

send(content):发送请求。其中content是请求参数

setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头

XMLHttpRequest对象的简单的属性：

onreadystatechange:该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。

readyState：该属性用于获取XMLHttpRequest对象处理状态

responseText:该属性用于获取服务器响应的XML文档对象

status：该属性是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码

statusText:该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。

XMLHttpRequest对象的readyState属性对应的状态值

0：请求未初始化

1：服务器连接已建立

2：请求已收到

3：正在处理请求

4：请求已完成且响应已就绪