Bootstrap typeahead，更改 Bloodhound 建议引擎使用的数据源答案

【问题标题】：Bootstrap typeahead, change the datasource used by the bloodhound suggestion engineBootstrap typeahead，更改 Bloodhound 建议引擎使用的数据源
【发布时间】：2014-07-29 19:28:32
【问题描述】：

我有一个带有自动完成功能的搜索字段，它的初始化如下：

    var reposVenda = new Bloodhound({
    datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.bairro); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: urlAutoCompleteVenda
    }
});

var reposAluguel = new Bloodhound({
    datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.bairro); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: urlAutoCompleteAluguel
    }
});

reposVenda.initialize();
reposAluguel.initialize();

$('#searchQuery').typeahead(null, {
    name: 'bairros',
    displayKey: 'bairro',
    source: reposVenda.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile([
          '<p class="bairro-autocomplete">{{bairro}}</p>'
        ].join(''))
    },
    queryTokenizer: queryTokenizer
});

现在我需要在用户单击页面上的按钮时更改源：

    $(".opt-busca-home").click(function (e) {
    e.preventDefault();

    var idItem = $(this).attr("id");
    buscaAtual = idItem.replace("opt-", "");

    if (buscaAtual == "comprar") {
        var autocomplete = $('#searchQuery').typeahead();
        autocomplete.data('typeahead').source = reposVenda.ttAdapter();
    }
    else {
        var autocomplete = $('#searchQuery').typeahead();
        autocomplete.data('typeahead').source = reposAluguel.ttAdapter();
    }
});

问题是当我单击按钮更改源时，控制台告诉我'Uncaught TypeError: Cannot set property 'source' of undefined'

我尝试了所有可能的方法，但没有成功。预输入有效，但仅适用于初始化的源。我做错了什么？

【问题讨论】：

我的回答对你有帮助吗？
我使用了 destroy/recreate typeahead 方法，因为我认为它更容易实现。
销毁/重新创建方法并不容易实现。只需比较答案中的代码即可。此外，bloodhound clear 和 re-initialize 方法的编写完全按照他们所说的进行，因此不需要销毁和重新创建。无论如何，很高兴你有一个适合你的解决方案。
我认为您的方法并不容易，因为我需要清除所有缓存，然后再向服务器请求以获取新列表。只销毁前面的类型，让猎犬独自一人恕我直言，对我需要的东西更友好。
啊，我明白了。是的，我的方法会触发重新获取。我会留下我的答案，因为如果使用本地或远程数据源，这将是一个好方法。

标签： javascript jquery twitter-bootstrap typeahead.js typeahead

【解决方案1】：

我在这里实现了一种在数据源之间切换的方法：

http://jsfiddle.net/Fresh/EEuyL/

请注意，虽然我在回答中使用了本地数据源，但该解决方案也适用于预取/远程源。

我用来在不同数据源之间切换的代码在这里：

var sourceSelected = $('#sourceSelected');
var toggle = false;

$('#switch').click(function () {
    titles.clear(); // First remove all suggestions from the search index

    if (!toggle) {
        toggle = true;
        titles.local = data2; // Next choose the desired alternate data source
        sourceSelected.text('Data Source 2');
    } else {
        toggle = false;
        titles.local = data1;
        sourceSelected.text('Data Source 1');
    }

    // Finally reinitialise the bloodhound suggestion engine
    titles.initialize(true); 
});

您可以找到 Bloodhound 的 clear 方法 here 及其 reinitialize 方法 here 的文档。

【讨论】：

【解决方案2】：

我认为更好的方法是销毁 typeahead 控件并重新初始化它：

$(".opt-busca-home").click(function (e) {
    e.preventDefault();

    $('#searchQuery').typeahead('destroy');

    var idItem = $(this).attr("id");
    buscaAtual = idItem.replace("opt-", "");

    var source = null;
    if (buscaAtual == "comprar") {
        source = reposVenda.ttAdapter();
    }
    else {
        source = reposAluguel.ttAdapter();
    }

    $('#searchQuery').typeahead(null, {
        name: 'bairros',
        displayKey: 'bairro',
        source: source,
        templates: {
            suggestion: Handlebars.compile([
              '<p class="bairro-autocomplete">{{bairro}}</p>'
            ].join(''))
        },
        queryTokenizer: queryTokenizer
    });
});

【讨论】：

当存在清除和重新初始化数据源的函数时，为什么要销毁并重新创建？