bootstrap typeahead - 更改源答案

【问题标题】：bootstrap typeahead - changing sourcebootstrap typeahead - 更改源
【发布时间】：2012-11-26 10:30:49
【问题描述】：

我正在寻找一种将source 更改为typeahed 的方法。

例如，假设我有以下 2 个列表，并且根据具体情况，我想让 typeahead 使用不同的来源。

var list1 = ["this", "is", "first", "list"],
    list2 = ["second", "list", "comes", "here"];

$("selector").typeahead({source: list1})

然后，当我这样做时

$("selector").typeahead({source: list2})

并开始在输入框中输入内容，第一个列表出现在新列表下方。

我试过了

$("selector")
    .removeData()
    .typeahead({source: list2})

然而，它没有任何效果。

【问题讨论】：

How to update the source Option in bootstrap-typeahead.js 的可能重复项

标签： jquery twitter-bootstrap bootstrap-typeahead

【解决方案1】：

您必须更新关联的数据字段，如 here 所示：

$("selector").data('typeahead').source = list2;

【讨论】：

没错，刚刚在github.com/twitter/bootstrap/issues/1997#issuecomment-4011687看到这个
是的，这就是我找到的同一个链接 :)
我无法设置未定义的属性“源”

【解决方案2】：

在使用 Bootstrap-3-Typeahead 库时，这些答案都不适合我。我能够通过销毁已初始化的预先输入并使用新源重新初始化来更新源：

    $(".typeahead").typeahead("destroy");
    $(".typeahead").typeahead({ source: result });

【讨论】：

不幸的是，这也具有破坏该元素上的事件的效果...
对，您需要将它们与源一起应用
确保在调用“destroy”方法时手动取消绑定您正在使用的任何事件处理程序（例如“typeahead:close”）。此方法不会取消绑定这些处理程序，因此每次销毁和重建时它们都会不断附加和降低性能。
Samuel Caillerie 的回答在 Bootstrap-3-Typeahead 上对我有用。

【解决方案3】：

不幸的是，接受的答案对我不起作用。这可能是较新版本的库的问题。对我来说，data('typeahead') 没有定义——取而代之的是 data('ttTypeahead') 和 data('ttAttrs')。它们都没有源属性。

在阅读了一些代码后，我想到了这个： $('selector').data('ttTypeahead').dropdown.datasets[0].source = mySourceFunction

而且它似乎有效。但是，可能存在定义多个数据集的情况。

【讨论】：

【解决方案4】：

我不确定我是否正确理解您的情况，但正如您所说“根据具体情况，我希望使用不同的来源进行预输入。”，我认为您可以使用函数作为typeahead 的源而不是数组。像这样：

function typeAheadSourceFunc(inputText) {
  if(inputText.length === 1) {
    return ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'];
  } else {
    return ['OtherAmsterdam', 'OtherWashington', 'OtherSydney'];                  
  }
}
$("SOMESELECTORHERE").typeahead({ source: typeAheadSourceFunc });

在此示例中，typeAheadSourceFunc 将在每次keypressed 在输入上触发并返回不同的源时触发。您可能可以在那里处理您的情况。

ps：我正在使用bootstrap3-typeahead.js v4.0.2

【讨论】：