javascript - 仅当用户输入特定字符（如@）时，如何使用引导程序预先输入显示自动完成选项？

Question

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

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

我查看了 typeahead api，但不知道如何实现这一点。

Answer 1

Typeahead 需要一个具有 value 和 tokens 属性的数据。

这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仍将显示I bought a shirt @red在列表中。

我认为您可以通过查看以下示例来接近您想要的内容，在该示例中我指定了第一个标记，而不是让 typeahead 为我做这件事，这只是为了给您一个示例，说明这两种方式如何工作。

您可能想要考虑进一步更改 typeahead 的工作方式，因为您正在尝试以对用户来说可能不那么直观的方式使用自动完成功能。

看到这个小提琴http://jsfiddle.net/KWftZ/2/

html:

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

js：

$(".typeahead").typeahead({                                                                                         
    local: [{
        value: 'I bought a shirt @red',
        tokens: ['@red']
    }, "@blue", "@green", "@yellow"]                                                                 
});