如何仅在用户输入特定字符(如 @）时使用引导预类型显示自动完成选项

How to show autocomplete options using bootstrap typeahead only when user enters a particular character like @?

本文关键字：类型 显示 选项 输入 用户 何仅 字符      更新时间：2023-09-26

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

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

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

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"]
}

当您键入 typeahead 输入并且您有多个标记时，可以通过键入其中一个标记的开头来找到该值，即键入 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"]                                                                 
});
相关文章：