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

【问题标题】：How to show autocomplete options using bootstrap typeahead only when user enters a particular character like @?仅当用户输入特定字符（如@）时，如何使用引导程序预先输入显示自动完成选项？
【发布时间】：2013-10-23 15:18:45
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript autocomplete bootstrap-typeahead typeahead

【解决方案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"]                                                                 
});

【讨论】：