AJAX_搜索联想

最新推荐文章于 2023-05-15 08:42:34 发布

若云止水

最新推荐文章于 2023-05-15 08:42:34 发布

阅读量116

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_41812346/article/details/130044396

版权

搜索联想，自动补全功能的核心实现原理：
- 当键盘事件发生之后，比如：keyup
- 发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
- 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
- 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
- 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索联想</title>
    <style>
        .userInput{
            width: 300px;
            height: 30px;
            font-size: 20px;
            padding-left: 5px;
            margin-left: 10px;
            border: 3px solid black;
        }

        .showData{
            width:304px;
            padding-left: 7px;
            border: 1px #8c939d solid;
            margin-left: 10px;
            display: none;
        }

        .showData p{
            margin: 6px;
        }
        .showData p:hover{
            background-color: #ddd;
            cursor: pointer;
        }

    </style>
</head>
<body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
    $(
        function(){
            $("#keyInput").keyup(
                //输入框绑定 keyup 事件，每当在输入框输入一个字符就发送ajax request,获取输入框内容作为参数发送给后端(rest风格)
                function(){
                    var s = this.value;
                    //console.log(s);
                    if( s != "" ) {
                        $.get("/ajax/associate/" + s, function (response) {
                            var re = JSON.parse(response);
                            //将响应的数据展现到 div 中
                            var html = "";
                            for (var i = 0; i < re.length; i++) {
                                var s = re[i];
                                html += `<p onclick="setInput(this)">${s.content}</p>`
                            }
                            //将响应的数据展现到 div 中
                            $("#associate").html(html);
                            //将div元素 display:none 修改为 block 才能展示出来
                            $("#associate").css({display: "block"});
                        });
                    }else {
                        //输入框中没有内容时，隐藏div
                        $("#associate").css({display: "none"});
                    }
                }
            );
        }
    );

    //绑定到 p 标签的 onclick 事件
    //当点击 元素时，将元素中的内容设置给 输入框
    function setInput(e){
        $("#keyInput").val(e.innerText);
        //点击的内容赋给输入框后，隐藏搜索联想
        $("#associate").css({display: "none"});
    }
</script>

<input type = "text" class = "userInput" id = "keyInput" />
<div class = "showData" id = "associate">
    <p>联想01</p>
    <p>联想02</p>
    <p>联想03</p>
</div>
</body>
</html>

controller

package com.example.demo07.controller;

import com.alibaba.fastjson.JSON;
import com.example.demo07.dao.SearchDao;
import com.example.demo07.dto.Area;
import com.example.demo07.dto.Book;
import com.example.demo07.dto.Content;
import com.example.demo07.service.AreaService;
import com.example.demo07.service.BookService;
import com.example.demo07.service.IBookService;
import com.example.demo07.service.UserService;
import com.example.demo07.service.impl.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.stream.Collectors;

import static java.util.Arrays.stream;

@RestController
@RequestMapping("/ajax")
public class AJAX {

    @Autowired
    SearchDao searchDao;

    @RequestMapping("/associate/{s}")
    public String associate(@PathVariable String s) throws UnsupportedEncodingException {
        /*http://localhost:8080/ajax/associate/%E7%BD%97
        url中的 中文会以16进制形式存在 %E7%BD%97
        decode(s,"utf-8") 将其转换为中文
         */
        String key = java.net.URLDecoder.decode(s,"utf-8");
        System.out.println(key);
        List<Content> contentList = searchDao.search(key);
        return JSON.toJSONString(contentList);
    }

}

DAO

package com.example.demo07.dao;

import com.example.demo07.dto.Content;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface SearchDao {

    @Select("select content from search where content like '${s}%' ")
    List<Content> search(String s);
}

dto

package com.example.demo07.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Content {

    private String content;
}

test

输入内容

点击罗小黑

删除 input 中内容

删除完 input 内容后

若云止水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX_搜索联想

发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）- 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。- 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。- 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。- 当键盘事件发生之后，比如：keyup。删除完 input 内容后。删除 input 中内容。
复制链接

扫一扫