Question

这是我想要实现的目标。我有一个textarea用户输入大量文本。现在，一旦用户键入@（在输入其他文本后），我想向他显示选项（比如各种颜色），用户应该可以从这些选项中进行选择。

例如，在textarea用户输入“我买了一件衬衫”，然后提到@。所以自动完成选项应该来了，他应该能够在红色，蓝色，绿色，黄色等之间进行选择。一旦用户选择任何颜色。文本区域应该变成的总输入 - “我买了一件衬衫@blue”

我查看了typeahead api，但无法弄清楚如何实现这一点。

Answer 1

Typeahead期望具有值和标记属性的基准。

token是用户输入时搜索的内容，value是自动完成提示中显示的内容以及从列表中选择后的内容。

如果你给它一个字符串，字符串就会变成一个数据。

如果字符串只有1个单词，即@red，那么标记和值都将为@red。像这样：

{ 
    value: "@red", 
    tokens: ["@red"]
}

如果字符串是多个单词，即I bought a shirt @red，那么它会被空格分成多个标记，如下所示：

{
    value: "I bought a shirt @red",
    tokens: ["I","bought","a","shirt","@red"]
}

当您输入预先输入并且您有多个令牌时，可以通过键入其中一个令牌的开头找到该值，即键入b或s仍会显示{{列表中的1}}。

我认为你可以通过查看以下示例来接近你想要的内容，我已经指定了第一个令牌，而不是让typeahead为我做这个，这只是为了给你一个两种方式如何工作的例子。

您可能想要考虑更改typeahead的工作原理，因为您尝试以对用户而言可能不那么直观的方式使用自动完成功能。

HTML：

I bought a shirt @red

JS：

<input type="text" class="typeahead" />