当前位置：首页 > JavaScript

js实现@功能

2026-02-02 07:56:45JavaScript

实现思路

在JavaScript中实现类似社交平台的@功能，通常需要监听用户输入，检测@符号的触发，展示匹配的用户列表，并允许用户选择后插入到输入框中。以下是具体实现方法：

监听输入事件

使用input或keydown事件监听输入框内容变化。当检测到@符号时，触发用户列表展示逻辑。

const inputElement = document.getElementById('inputBox');
inputElement.addEventListener('input', handleInput);

function handleInput(event) {
    const value = event.target.value;
    const lastChar = value.slice(-1);

    if (lastChar === '@') {
        showUserList();
    }
}

展示匹配用户列表

根据输入内容过滤匹配的用户，动态生成下拉列表供选择。可以使用绝对定位将列表悬浮在输入框下方。

function showUserList() {
    const userList = ['用户1', '用户2', '用户3']; // 实际应从后端获取
    const listElement = document.createElement('ul');
    listElement.className = 'user-list';

    userList.forEach(user => {
        const item = document.createElement('li');
        item.textContent = user;
        item.addEventListener('click', () => selectUser(user));
        listElement.appendChild(item);
    });

    document.body.appendChild(listElement);
}

处理用户选择

当用户从列表中选择某项时，将用户名插入到输入框中@符号之后的位置，并移除用户列表。

function selectUser(username) {
    const inputElement = document.getElementById('inputBox');
    const currentValue = inputElement.value;
    const atIndex = currentValue.lastIndexOf('@');

    const newValue = currentValue.slice(0, atIndex + 1) + username + ' ';
    inputElement.value = newValue;

    const listElement = document.querySelector('.user-list');
    if (listElement) {
        listElement.remove();
    }
}

样式优化

为用户列表添加基本样式，使其看起来像下拉菜单。

.user-list {
    position: absolute;
    border: 1px solid #ddd;
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    max-height: 200px;
    overflow-y: auto;
}

.user-list li {
    padding: 8px 12px;
    cursor: pointer;
}

.user-list li:hover {
    background-color: #f5f5f5;
}

高级功能扩展

对于更复杂的需求，可以加入以下功能：

输入时实时过滤用户列表
支持键盘上下键选择用户
在插入的用户名前后添加特殊标记以便后端识别

function filterUserList(input) {
    const atIndex = input.lastIndexOf('@');
    if (atIndex === -1) return;

    const searchTerm = input.slice(atIndex + 1).toLowerCase();
    const filteredUsers = allUsers.filter(user => 
        user.toLowerCase().includes(searchTerm)
    );
    updateUserList(filteredUsers);
}