文本框输入文字后下拉显示相关联的查询结果

效果图

css样式

<style>
	/*下拉查询样式调整*/
    #nodename-dropdown {
        display: none;
        position: absolute;
        z-index: 1000;
        width: 100%; /* 确保宽度与输入框一致 */
        border: 1px solid #ccc;
        background-color: #fff;
        max-height: 200px;
        overflow-y: auto;
    }

    .dropdown-item {
        padding: 8px 10px;
        cursor: pointer;
    }

    .dropdown-item:hover {
        background-color: #f0f0f0;
    }
</style>

html部分

<form id="formId">
    <input class="form-control" id="areacode" name="areacode" type="hidden"/>
    <div class="select-list">
        <ul>
            <li>
                <input type="text" name="nodename" id="nodename" placeholder="台账单位" autocomplete="off"/>
                <div id="nodename-dropdown" class="dropdown-content"></div>
            </li>
        </ul>
    </div>
</form>

js部分（参数需根据需求调整）

$(function () {
	//台账单位查询
    $('#nodename').on('input', function () {
        var query = $(this).val();

        // 动态设置下拉框的宽度与输入框一致
        var inputWidth = $(this).outerWidth();
        $('#nodename-dropdown').css('width', inputWidth);

        // 如果输入内容不为空
        if (query.length > 0) {
            $.ajax({
                url: prefix + '/getNodeNameByAreaCode', // 替换为你的后台接口
                type: 'POST',
                data: {
                    nodename:  $("#nodename").val(),
                    areacode:  $("#areacode").val()
                }, // 传递输入框内容
                success: function (response) {
                    var $dropdown = $('#nodename-dropdown'); // 获取下拉框容器
                    $dropdown.empty(); // 清空之前的内容
					//模拟数据
                    // var response = [
                    //      { "name": "台账单位A" },
                    //      { "name": "台账单位B" },
                    //      { "name": "台账单位C" }
                    //  ];
                    if (response.length > 0) {
                        // 遍历响应内容，生成下拉项
                        $.each(response, function (index, item) {
                            $dropdown.append('<div class="dropdown-item" data-value="' + index + '">' + item + '</div>');
                        });
                        $dropdown.show(); // 显示下拉框
                    } else {
                        $dropdown.hide(); // 无内容时隐藏下拉框
                    }
                },
                error: function () {
                    $('#nodename-dropdown').hide(); // 请求失败时隐藏下拉框
                }
            });
        } else {
            $('#nodename-dropdown').hide(); // 输入为空时隐藏下拉框
        }
    });

    // 监听点击下拉项事件
    $(document).on('click', '.dropdown-item', function () {
        var selectedValue = $(this).text(); // 获取选中的项文本
        $('#nodename').val(selectedValue); // 将选中项的值填入输入框
        $('#nodename-dropdown').hide(); // 隐藏下拉框
    });

    // 点击页面其他地方时隐藏下拉框
    $(document).click(function (e) {
        if (!$(e.target).closest('.select-list').length) {
            $('#nodename-dropdown').hide();
        }
    });
})

java代码部分

/**
 * 根据节点模糊查询台账单位
 */
@RequestMapping("/getNodeNameByAreaCode")
@ResponseBody
public List<String> getNodeNameByAreaCode(@RequestParam("areacode")String areacode, @RequestParam("nodename")String nodename){
    List<String> list = tbCertlogService.selectNodeNameListByAreaCode(areacode, nodename);
    return list;
}

maaper部分（注意传递两个参数时Mapper层需要对参数做处理，否则xml中parameterType无法正常接收两个参数值）

public List<String> selectNodeNameListByAreaCode(@Param("areacode")String areacode, @Param("nodename")String nodename);

最后xml部分查询语句，参考，注意模糊查询以及去重

<select id="selectNodeNameListByAreaCode" resultType="String">
    select DISTINCT nodename
    from tb_certlog
    <where>
        <if test="areacode != null  and areacode != '' and areacode!='000'">
            and AREACODE = #{areacode}
        </if>
        <if test="nodename != null  and nodename != ''">
            and nodename LIKE CONCAT('%',#{nodename},'%')
        </if>
    </where>
</select>