Laravel+jQuery自动补全获取选中主键及修复下拉文本溢出问题

1. 选中项主键绑定问题修复 #

之前的代码无法拿到主键的核心原因：没有把每个下拉选项对应的项目主键和对应的选项DOM做绑定，点击列表项时只能读到选项上显示的项目名文本，完全没法关联到对应的主键值；甚至之前循环时把所有遍历到的主键直接硬追加到#pkproject的DOM内容里，完全不符合表单值的存储逻辑。
修改方式：

• 遍历生成下拉选项时，给每个<li>节点加自定义属性data-pk，把当前循环项的element.PK_Project存到这个属性上，和选项显示的项目名一一绑定
• 移除循环中错误向#pkproject追加主键值的代码
• 触发列表点击选中事件时，从当前点击的<li>节点的data-pk属性里读取对应的主键，直接赋值给#pkproject元素

2. 下拉菜单文本溢出问题修复 #

下拉内容跑出输入框范围的核心原因：

• 给下拉<ul>写死了position:relative的内联样式，层级上没有和输入框形成正确的相对位置关系
• 没有给下拉容器设置和输入框一致的宽度，也没有加长文本换行、溢出截断的样式规则
  修改方式：
• 给下拉容器设置和输入框100%同宽的尺寸
• 给选项内容加长文本自动换行的样式，限制下拉最大高度时加纵向滚动条，避免内容无限制撑破布局

调整后的完整实现代码 #

基础HTML结构 #

<!-- 项目名搜索输入框 -->
<input type="text" name="projectname" id="projectname" class="form-control" placeholder="输入项目名搜索">
<!-- 存储选中项主键的隐藏域 -->
<input type="hidden" name="pkproject" id="pkproject">
<!-- 下拉列表容器 -->
<div id="projectList"></div>

优化后的JS逻辑 #

$(document).ready(function(){
    $('#projectname').keyup(function(){ 
        const query = $(this).val().trim();
        // 每次输入先清空上一次的下拉内容和存储的主键
        $('#projectList').empty();
        $('#pkproject').val('');

        if(query !== '') {
            const _token = $('input[name="_token"]').val();
            $.ajax({
                url:"{{ route('getProject') }}",
                method:"POST",
                data:{query:query, _token:_token},
                dataType:'JSON',
                success:function(res){
                    // 无匹配结果时的提示
                    if(res.listProject.length === 0) {
                        $('#projectList').html(`
                            <ul class="dropdown-menu" style="display:block; width:100%; margin:0;">
                                <li style="padding:8px 12px;">无匹配的项目</li>
                            </ul>
                        `).fadeIn();
                        return;
                    }

                    // 先拼完整的下拉HTML，减少DOM多次重绘
                    let listHtml = `<ul class="dropdown-menu" style="display:block; width:100%; margin:0; max-height:200px; overflow-y:auto;">`;
                    res.listProject.forEach(item => {
                        // 每个li绑定对应的项目主键到data-pk属性
                        listHtml += `
                            <li 
                                style="padding:8px 12px; cursor:pointer; word-break:break-all;" 
                                data-pk="${item.PK_Project}"
                            >
                                <a href="#" style="text-decoration:none; color:#333;">${item.projectName}</a>
                            </li>
                        `;
                    });
                    listHtml += '</ul>';

                    // 一次性插入拼好的下拉列表
                    $('#projectList').html(listHtml).fadeIn();
                }
            });
        }
    });

    // 点击选中下拉项
    $(document).on('click', '#projectList li', function(e){  
        // 阻止a标签默认跳转行为
        e.preventDefault();
        // 把选中的项目名填到输入框
        $('#projectname').val($(this).text().trim()); 
        // 从li的自定义属性里取对应主键，填到隐藏域
        $('#pkproject').val($(this).data('pk'));  
        // 收起下拉
        $('#projectList').fadeOut();  
    });  

    // 点击输入框外区域时自动收起下拉，优化体验
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#projectname, #projectList').length) {
            $('#projectList').fadeOut();
        }
    });
});

实现注意点 #

• 控制器端逻辑不需要调整，只要返回的项目列表数组里同时包含PK_Project和projectName字段，前端就能正常读取
• 如果引入了Bootstrap的下拉组件，需要给输入框和下拉的共同父元素加position:relative类，避免下拉定位偏移
• 存储主键的#pkproject建议用hidden类型的input，不要用普通可见元素，提交表单时会和其他字段一起传递到后端

内容的提问来源于stack exchange，提问作者Ikra