javascript - 输入自由文本输入 HTML 时的内联下拉列表选择

Question

我正在寻找一种向 HTML 页面上的文本区域输入添加功能的方法，您可以在其中写入文本字段，并且在您键入时，如果您添加一个与@start_typing号，它将为您提供一个选项列表，这些选项将逐渐减少当您从列表中键入更多单词的字母时。

当您将同事添加到页面或评论中时，我基本上想要您可以在 Atlassian Confluence 中执行的操作。我希望能够借助选项列表在文本输入中添加一个或多个值。

当您键入作为从列表中选择的替代方法时，我从下拉列表中找到了自动完成功能，但这是唯一最终出现在屏幕变量中的内容。

例如，我想输入@gross_value = @net_value + @tax_value，并且在整个句子中添加 @ 的每一点，它都会删除一个选项列表，我可以从中选择或继续输入（使用列表作为参考，就像在 Visual Studio Code 中所做的那样.)

下面是我的代码示例。在我的用例中，我知道要使用的列表的名称，它是 schema_values（映射中使用的源模式和目标模式值的列表），并且我知道我会在一个公式。

在下面示例的上下文中，我可能想输入句子，“我最喜欢的汽车是@Saab，我不太喜欢@Skoda”——我期望发生的事情是当我输入 @ 我得到完整的汽车列表然后当我输入 SI 时，只会获得 SaaB 和 Skoda 的选项，当我选择或完成输入列表中存在的项目时，它会留下 & 符号。

我有一个程序可以从一个数据模式转换为另一个数据模式，并且界面要求我创建公式，其中包括选择值以设置 from 和 to 参数，这些参数与我将放在一组选项中的模式值相匹配，如图所示.

它将用于数学计算或从一个值映射到另一个值。接口的目的是创建一个应用程序可以处理的配置文件。

<input type="text" list="cars" />
    <datalist id="cars">
       <option>Volvo</option>
       <option>Saab</option>
       <option>Skoda</option>
       <option>Mercedes</option>
       <option>Audi</option>
    </datalist>

标签： javascripthtml