js 实现@某人
实现 @某人的功能
在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);
}插入选中用户
当用户从列表中选择一个名字时，将其插入输入框：
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;
}
}注意事项
- 确保下拉列表的样式和位置与输入框对齐。
- 处理用户输入中的多个@符号情况。
- 在移动设备上测试触摸事件兼容性。
