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

Posted 2023-05-08

技术标签:

【中文标题】显示用户在文本框中键入指定字符时的建议【英文标题】：Show suggestions from when user types a specified character in textbox 【发布时间】：2019-02-25 00:29:58 【问题描述】：

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

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

请专家帮忙实现。

【问题讨论】：

你试过什么？你可以从onkeyup 和一个函数开始，它会在你想要的地方显示下拉菜单，然后显示你想出的代码我们如何编写一个显示下拉列表的函数？ 【参考方案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)

有很多库很好地提供了这个功能，你可能想看看它们。

更新：

我在codesandbox上做了一个小项目，你可以点击以下链接查看：

这将有助于一个起点。

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

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

总结一下：您可以从中汲取灵感或继续编辑此内容或提出更好的解决方案。其他人可能对此有很好的解决方案，我期待他们。愿 Javascript 的力量与你同在。

这是正在实施的项目：

【讨论】：

但是当在文本框中触发某些事件时，我如何制作一个显示下拉值的函数。如何构建这个显示建议（）函数。