如何在 Bootstrap 标签输入中使用 typeahead 选项

Posted 2023-05-07

【中文标题】如何在 Bootstrap 标签输入中使用 typeahead 选项

【英文标题】：How to use typeahead options in Bootstrap Tags Input

【发布时间】：2015-06-29 02:40:11

【问题描述】：

我正在使用Bootstrap tags input 和typeahead，我想知道如何将默认选项设置为typeaheadjs。在examples 我见过这样的：

var input = $('input');
input.tagsinput(
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: 
        name: 'engine',
        displayKey: 'text',
        source: engine.ttAdapter()

这里，typeaheadjs 代表一个数据集，但我如何添加基本选项，如 hint、highlight、minLength强>?

【参考方案1】：

您可以将 add typeaheadjs 作为对象数组。第一个对象是选项和第二个数据集

typeaheadjs: [ options, datasets ]

应该这样做。

$('input').tagsinput(
    typeaheadjs: [
          minLength: 3,
          highlight: true
    ,
        minlength: 3,
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    ],
    freeInput: true
);

这是一个DEMO

希望这会有所帮助。

【讨论】：

我明白了...感谢@DhirajBodicherla 使用examples site 中的包不起作用。它似乎已经过时了。我已经尝试使用 master 分支，它运行良好，谢谢！

演示似乎无法正常工作。预输入不起作用。

@ctorx：它正在工作。开始输入一个单词，它会起作用

The demo 是功能性的，但很时髦...文本框的大小会随着您键入而改变...

该演示非常适合我，但我似乎无法使用我自己的网站获得tyepahead 功能。标签有效，但我没有看到可供选择的数据列表。我什至复制并粘贴了演示以试用。