Javascript nge.text.length； } 返回{ 开始：开始， 完:完 } } $（“#写入”）.keydown（函数（e）{ 如果（e.keyCode==9）{ var caret=getCaretPosition（此）； var word=/\S+$/.exec（this.value.slice（0，this.value.indexOf（“”，caret.end））； word=word？word[0]：空； 如果（字字符（0）='@'） //警报（userlist.filter（（x）=>x.indexOf（word.slice（1））==0））； var stringParts=$（this.val（）.split（'@'）； var nameToInsert=userlist.filter（（x）=>x.indexOf（word.slice（1））==0）[0]； var completeString=stringParts[0]+'@'+nameToInsert； $（this）.val（completeString）； e、 预防默认值（）； 返回false； } }); #写入{宽度：500px；} 你好@b怎么了？你好@你也是。。。键入@b，然后键入“TAB”键，它将自动完成用户名

这是一个在现代浏览器（Chrome、Firefox、Edge）中运行的非常基本的示例：

const users=['asdasd'，'fgsfds'，'Foobar']
常量输入=document.getElementById（'input'）
常数patt=/\S+$/
input.addEventListener（'keydown'，e=>{
如果（e.key！=='Tab'）{
返回
}
e、 预防默认值（）
const start=input.selectionStart
const seg=input.value.slice（0，开始）
常量匹配=（分段匹配（patt）| |[]）[0]
如果（！匹配）{
返回
}
const idx=users.findIndex（x=>x.startsWith（匹配））
if（idx<0）{
返回
}
const replace=users[users[idx]==match？（idx+1）%users.length:idx]
const newSeg=分段替换（patt，replace）
input.value=newSeg+input.value.slice（开始）
input.setSelectionRange（newSeg.length，newSeg.length）
})

---

对不起，问题是如何进行实际的自动补全（即自动用列表中的用户名替换用户名的开头）。您到底需要什么？所有名字的下拉列表？或者将名字匹配放入输入，然后将光标放在用户写入的最后一个字符上？

将名字匹配放入输入，然后将光标精确地放在用户写入的最后一个字符上

，如果再次按下TAB键，则下一个匹配（无下拉菜单）@mikepa88.Nice@mikepa88！两个小错误：1）尝试“@zz”，然后

选项卡

，它会显示“undefined”=>它应该什么都不做2）如果文本区域中有很多单词，例如

Hello@b怎么了？你好@你也是

：如果你点击@b，那么

选项卡

：它会删除所有文本，只写一个用户名。如何在正确的位置插入用户名？请使用“$（this）.val（$（this）.val（）.replace（word，“@”+usermatches[index]”），或类似的内容来替换单词而不是整个内容。对于未定义的问题，请检查userlist.filter是否返回空结果，在这种情况下，请不要执行任何操作以供将来参考，如@slikts，

const patt=/\b@（\S+）所建议的那样$/；

将使

user+TAB

或

@user+TAB

都能工作。多亏了他一百万次！为了让它能在更多浏览器上工作，可以复制/粘贴代码。作为构建步骤的一部分，您可能只需要使用Babel。当我们在Hello@b之后用光标按TAB时，会出现错误：以下所有单词都是eras预计起飞时间。