js 实现@某人
实现@某人的功能
在JavaScript中实现@某人功能通常涉及监听用户输入、匹配特定字符（如@）并展示可选用户列表。以下是实现步骤：
监听输入事件
通过监听输入框的keyup或input事件，检测用户是否输入了@符号：
const inputElement = document.getElementById('input');
inputElement.addEventListener('input', (event) => {
const text = event.target.value;
const lastChar = text.slice(-1);
if (lastChar === '@') {
showUserList(); // 触发显示用户列表
}
});展示用户列表
当检测到@符号时，动态渲染一个下拉列表供用户选择：
function showUserList() {
const userList = ['用户A', '用户B', '用户C']; // 实际可从API获取
const listContainer = document.createElement('div');
listContainer.id = 'user-list';
userList.forEach(user => {
const item = document.createElement('div');
item.textContent = user;
item.addEventListener('click', () => selectUser(user));
listContainer.appendChild(item);
});
document.body.appendChild(listContainer);
}处理用户选择
点击用户列表项后，将用户名插入输入框并移除列表：
function selectUser(username) {
const inputElement = document.getElementById('input');
const currentText = inputElement.value;
inputElement.value = `${currentText}${username} `; // 添加空格分隔
const listContainer = document.getElementById('user-list');
if (listContainer) listContainer.remove();
}优化体验
-
防抖处理：避免频繁触发搜索请求。
let debounceTimer; inputElement.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { // 检测逻辑 }, 300); }); -
键盘导航：支持上下箭头选择用户。
document.addEventListener('keydown', (event) => { if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { // 高亮切换列表项 } });
数据绑定
实际项目中，用户列表通常通过API动态获取：
async function fetchUsers(query) {
const response = await fetch(`/api/users?q=${query}`);
return response.json();
}样式与定位
通过CSS确保用户列表跟随输入框位置：
#user-list {
position: absolute;
border: 1px solid #ddd;
max-height: 200px;
overflow-y: auto;
}通过以上步骤，可以实现一个基础的@某人功能，适用于评论、聊天等场景。
