java实现弹出搜索提示框，点击提示自动填充到搜索框-白红宇

java实现弹出搜索提示框，点击提示自动填充到搜索框

阅读量：796 次

发布时间：2023-03-28

本文共 2150 字，大约阅读时间需要 7 分钟。

搜索提示功能实现方案

一、功能实现原理

该功能通过在搜索框中输入设备名称时，触发动态提示，点击提示项后自动填充到搜索框中。实现原理是对搜索框的onkeyup事件进行处理，通过AJAX调用后台接口，返回模糊查询的结果。

二、前端代码

搜索框及提示框初始化

提示框样式

.searchDiv {
    display: none;
    position: absolute;
    z-index: 60;
    padding: 10px;
    padding-top: 5px;
    color: #cdcdcd;
    background: #093B67;
    width: 245px;
    height: 100px;
    line-height: 1.5;
    overflow: auto;
}

主要逻辑代码

function getCameraNames() {
    const keyVal = $('#cameName').val().replace(/(^\s*)|(\s*$)/g, '');
    if (keyVal === '') {
        searchDivOff();
    } else {
        $('.searchDiv').css('display', 'block');
        $('.searchDiv').html('');
        $.ajax({
            type: "POST",
            async: false,
            url: "/camera/getCameraNames",
            data: { cameraName: $('#cameName').val() },
            dataType: "json",
            success: function(result) {
                if (result.cameraNameList !== null) {
                    for (let i = 0; i < result.cameraNameList.length; i++) {
                        $('.searchDiv').append($('').text(result.cameraNameList[i]));
                    }
                }
            },
            error: function(errorMsg) {
                alert("设备搜索提示请求失败");
            }
        });
    }
}
// 点击提示项自动填充
$(document).on("click", ".searchDiv > li", function() {
    $('#cameName').val($(this).text());
    searchDivOff();
});

三、后端代码

DAO接口

List
     
       getCameraNames(@Param("cameraName") String cameraName);

DAO实现

SELECT CAMERA_NAME FROM tb_camera_info WHERE CAMERA_NAME LIKE CONCAT('%', #{cameraName}, '%')

Service实现

@Override
public List
       
         getCameraNames(String cameraName) {
    return this.baseMapper.getCameraNames(cameraName);
}

Controller实现

@RequestMapping(value = "/getCameraNames")
@ResponseBody
public Object getCameraNames(@RequestParam String cameraName) {
    JSONObject jsonData = new JSONObject();
    if (cameraName != null && !cameraName.isEmpty()) {
        List
        
          cameraNameList = cameraService.getCameraNames(cameraName);
        jsonData.put("cameraNameList", cameraNameList);
    }
    return jsonData;
}