如何实现输入框内输入[后弹出标签候选列表并定位至光标处？

我正在开发一款Web应用，支持接收标签作为输入并替换为对应值（比如输入“Hello mr [NAME]”会替换成“Hello mr Robert”），这部分已实现。现在想加个体验优化：用户输入左括号“[”时，弹出匹配已输入字符的标签列表供选择。目前开发完成80%，但卡在两个关键点：

1. 如何获取输入框内最后输入字符在页面上的位置
2. 如何将标签列表定位到输入框内的对应位置

附上现有代码：

var template = document.createElement("ul");
template =`<ul></ul>`;
var tagsArr = [];
var alltags ;

//从数据库获取标签并转为集合

$.ajax({
    url: "/getTags",
    type: "GET",
    dataType: "json",
    success: function (data) {
       console.log(data.tags)
        data.tags.forEach((element) => {
            tagsArr.push(element.name);
        });

         alltags = new Set(tagsArr);

   //----------------------------------------

    },
});

//在集合中搜索包含已输入字符的标签
function search(e) {
    let X = e.target.selectionStart
    console.log(e.keyCode);
    let result = document.getElementById("result");
    result.innerHTML = "<b>X-coordinate: </b>" + X;
    var taglist = document.getElementById("taglist");
    if (taglist != null) {
       taglist.remove();
    }
    var filtredTags = [];
    alltags.forEach(function (value) {
      
        if (value.includes(String.fromCharCode(e.keyCode).toUpperCase())) {
            //需重新检查此处逻辑
            filtredTags.push(value);
         
        }
    });

    return build(new Set(filtredTags));
}


//构建包含搜索结果标签的列表元素
function build(Mcontent) {
    var str = ""
    var list  = document.createElement("ul");
    list.style.fontSize= "8pt";
    list.style.listStyle = "none";
    list.setAttribute("id","taglist");
    Mcontent.forEach(function (value) {
    var listeitem = document.createElement("li")
    listeitem.append(value)
    list.append(listeitem) 
    });

    var body = document.getElementsByTagName("body")[0];
   // str = "<ul id='taglist'  >"+str+"</ul>";
    body.append(list) ;
}

一、获取输入框内字符的页面位置 #

通过创建临时匹配元素计算光标偏移量，结合输入框本身的位置来得到目标字符的页面坐标：

1. 截取输入框中到光标位置的文本
2. 创建一个隐藏的临时元素，复制输入框的字体、字号、内边距等关键样式
3. 将截取的文本放入临时元素，用getBoundingClientRect()获取其宽度，即光标在输入框内的水平偏移
4. 输入框的页面左位置加上该偏移量，就是目标字符的水平位置；垂直位置直接用输入框的底部坐标

示例代码：

function getCursorPosition(input) {
    const inputRect = input.getBoundingClientRect();
    const tempEl = document.createElement('span');
    // 复制输入框核心样式保证宽度计算准确
    tempEl.style.font = window.getComputedStyle(input).font;
    tempEl.style.padding = window.getComputedStyle(input).padding;
    tempEl.style.position = 'absolute';
    tempEl.style.visibility = 'hidden';
    // 填充到光标位置的文本
    tempEl.textContent = input.value.substring(0, input.selectionStart);
    document.body.appendChild(tempEl);
    const tempRect = tempEl.getBoundingClientRect();
    document.body.removeChild(tempEl);
    
    return {
        left: inputRect.left + tempRect.width,
        top: inputRect.bottom // 让列表显示在输入框下方
    };
}

二、定位标签列表 #

1. 将标签列表的CSS定位设为fixed（相对于视口，无需处理滚动偏移；若输入框在定位容器内，可改用absolute）
2. 用上面方法获取的坐标，直接设置列表的left和top样式
3. 给列表添加背景、边框和高z-index，避免被页面其他元素遮挡

修改后的build函数：

function build(Mcontent, position) {
    var taglist = document.getElementById("taglist");
    if (taglist != null) {
       taglist.remove();
    }
    
    var list  = document.createElement("ul");
    list.style.fontSize= "8pt";
    list.style.listStyle = "none";
    list.setAttribute("id","taglist");
    // 设置定位样式
    list.style.position = 'fixed';
    list.style.left = `${position.left}px`;
    list.style.top = `${position.top}px`;
    list.style.background = '#fff';
    list.style.border = '1px solid #ccc';
    list.style.padding = '4px 0';
    list.style.zIndex = '9999';
    
    Mcontent.forEach(function (value) {
        var listeitem = document.createElement("li")
        listeitem.append(value);
        listeitem.style.padding = '4px 12px';
        listeitem.style.cursor = 'pointer';
        // 添加点击选择标签的逻辑
        listeitem.addEventListener('click', function() {
            const input = document.getElementById('your-input-id'); // 替换为你的输入框ID
            const cursorPos = input.selectionStart;
            const textBefore = input.value.substring(0, cursorPos);
            const tagStart = textBefore.lastIndexOf('[');
            // 替换[之后的内容为完整标签+]
            const newValue = input.value.substring(0, tagStart) + `[${value}]` + input.value.substring(cursorPos);
            input.value = newValue;
            // 光标移到标签末尾
            input.selectionStart = input.selectionEnd = tagStart + value.length + 2;
            taglist.remove();
        });
        list.append(listeitem); 
    });

    document.body.append(list);
}

优化搜索逻辑 #

原逻辑仅匹配当前按键字符，改为匹配[之后的所有输入内容，更符合用户输入习惯：

function search(e) {
    // 只在输入[或输入[之后的字符时触发
    const input = e.target;
    const cursorPos = input.selectionStart;
    const textBeforeCursor = input.value.substring(0, cursorPos);
    const tagStartIndex = textBeforeCursor.lastIndexOf('[');
    if (tagStartIndex === -1) return;
    
    // 获取[之后的输入内容，用于前缀匹配
    const partialTag = textBeforeCursor.substring(tagStartIndex + 1).toUpperCase();
    var filtredTags = [];
    alltags.forEach(function (value) {
        if (value.toUpperCase().startsWith(partialTag)) {
            filtredTags.push(value);
        }
    });
    
    const position = getCursorPosition(input);
    return build(new Set(filtredTags), position);
}

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