当前位置：首页 > JavaScript

js 实现@某人

2026-04-06 03:00:36JavaScript

实现 @某人的功能

在JavaScript中实现@某人功能通常涉及监听用户输入、匹配特定模式（如@符号）并显示匹配的用户列表。以下是实现这一功能的常见方法：

监听输入事件

使用input或keydown事件监听用户输入，检测是否输入了@符号：

const inputElement = document.getElementById('input');
inputElement.addEventListener('input', (e) => {
    const text = e.target.value;
    const lastChar = text.slice(-1);
    if (lastChar === '@') {
        showUserList(); // 显示用户列表
    }
});

匹配用户列表

根据输入的字符过滤用户列表，通常通过字符串匹配或正则表达式实现：

function filterUsers(query) {
    const users = ['Alice', 'Bob', 'Charlie'];
    return users.filter(user => 
        user.toLowerCase().includes(query.toLowerCase())
    );
}

显示下拉列表

动态生成下拉列表显示匹配的用户：

function showUserList() {
    const dropdown = document.createElement('div');
    dropdown.id = 'user-dropdown';
    // 填充匹配的用户列表
    document.body.appendChild(dropdown);
}

插入选中用户

当用户从列表中选择一个名字时，将其插入输入框：

js 实现@某人

function insertUser(userName) {
    const input = document.getElementById('input');
    const text = input.value;
    const atIndex = text.lastIndexOf('@');
    input.value = text.slice(0, atIndex) + '@' + userName + ' ';
}

高级功能扩展

高亮显示：使用span标签为@提及的用户添加特殊样式。
异步搜索：通过API请求动态加载用户列表。
键盘导航：支持上下箭头选择用户。

完整示例代码

const users = ['Alice', 'Bob', 'Charlie'];
const input = document.getElementById('input');
let dropdown = null;

input.addEventListener('input', (e) => {
    const text = e.target.value;
    const lastAtPos = text.lastIndexOf('@');

    if (lastAtPos >= 0) {
        const query = text.slice(lastAtPos + 1);
        const matchedUsers = filterUsers(query);

        if (matchedUsers.length > 0) {
            if (!dropdown) {
                dropdown = createDropdown();
            }
            updateDropdown(matchedUsers);
        } else if (dropdown) {
            removeDropdown();
        }
    } else if (dropdown) {
        removeDropdown();
    }
});

function filterUsers(query) {
    return users.filter(user => 
        user.toLowerCase().includes(query.toLowerCase())
    );
}

function createDropdown() {
    const div = document.createElement('div');
    div.className = 'user-dropdown';
    document.body.appendChild(div);
    return div;
}

function updateDropdown(users) {
    dropdown.innerHTML = users.map(user => 
        `<div onclick="selectUser('${user}')">${user}</div>`
    ).join('');
}

function selectUser(user) {
    const text = input.value;
    const lastAtPos = text.lastIndexOf('@');
    input.value = text.slice(0, lastAtPos) + '@' + user + ' ';
    removeDropdown();
}

function removeDropdown() {
    if (dropdown) {
        document.body.removeChild(dropdown);
        dropdown = null;
    }
}