javascript - Bootstrap typeahead,更改 bloodhound 建议引擎使用的数据源

标签 javascript jquery twitter-bootstrap typeahead.js typeahead

我有一个带有自动完成功能的搜索字段,它是这样初始化的:

    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();
    }
});

问题是当我单击按钮更改源时,控制台告诉我“未捕获的类型错误:无法设置未定义的属性‘源’”

我尝试了所有可能的方法,但都没有成功。 typeahead 有效,但仅适用于初始化的源。我做错了什么?

最佳答案

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

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 清除方法的文档 here , 及其重新初始化方法 here .

关于javascript - Bootstrap typeahead,更改 bloodhound 建议引擎使用的数据源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22998351/

相关文章:

javascript - react 路由器,redux, Electron : router isn't rendering

javascript - 使用 jQuery 阻止 HTML 表单提交

javascript - 如何使用 Javascript Regex 获取值

jquery - 检查类为 'X' 的元素是否具有 'N' 的 rel

javascript - HTML CSS, Bootstrap 响应式 DIV 高度

javascript - 禁用从另一种形式到另一种形式的按钮时出现问题

javascript - W3 学校 cookie 的删除 cookie 按钮

javascript - JQuery 提交按钮第二次不起作用

css - Bootstrap CSS : center any col- that overflows a line

html - 在行中 Bootstrap 奇怪的边距行为