当用户在文本框中键入指定字符时显示建议

Question

问题陈述：我想使用javascript或Jquery构建此功能，如果用户在文本框中键入指定的字符（例如@ symbol），则应在下拉列表中显示数组的值。例如说我有值数组： 值[yyyy，yy]

用户类型：abc @ 然后@ yyyy和yy之后应出现在下拉列表中。 就像当我们在whatsapp组中写@符号时，它显示该组的联系人列表。此功能与此类似。 此外，它与普通的自动建议不同，后者在用户键入某些内容时显示建议。它与jquery自动完成功能不同，后者基于文本框中的输入显示建议。这里，我们希望下拉列表中的预定义列表的值是在用户键入@符号时开始的，而不是基于文本框中的整个输入。

专家请帮助实现这一目标。

Answer 1

基本实现： 您可以在输入/某些特定元素的按键上附加一个侦听器（也可以是contenteditable div） 然后您可以检查用户是否按下了@键。

let element = document.getElementById('#some-element');

element.addEventListener('keydown', function(event) {
  const key = event.key;
  if (key === '@') {
    displaySuggestions();
  }
});

用户只要按“ @”键，就可以调用displaySuggestions()函数。 这将是一个可以构建的简单组件，并且当用户单击建议中的任何值时，都可以将该值插入在插入符号位置。

请参阅以下内容：Insert text into textarea at cursor position (Javascript)

有很多库可以很好地提供此功能，您可能需要检出它们。

---

更新：

我在codeandbox上做了一个小项目，您可以单击以下链接进行查看：

这将为您提供一个起点。

我已经记录了解释行为及其执行方式的代码。 在该示例中，我使用了一个contenteditable div，并且该示例肯定没有针对性能进行优化，但是围绕它可以做很多事情来改进它。

我同意有很多错误，所有这些错误都可以解决，但是在20-30分钟内，这就是我所能做的。

总结： 您可以从中获得启发或继续进行编辑，或者为您提供更好的解决方案。 其他人可能对此有很好的解决方案，我期待着他们。 愿Javascript的力量与您同在。

这是正在进行的项目：