Bootstrap 3 typeahead.js - 远程url属性

Question

我正在尝试使用添加属性的URL来调用我的远程URL.

现在我有这个工作:

$('#league').typeahead({
        remote: '/typeahead/get_league?query=%QUERY',
        limit: 10
});

现在我想做这样的事情:

$('#league').typeahead({
        remote: function () {
            var q = '/typeahead/get_league?query=%QUERY';
            if ($('#sport').val())
                q += "&sport=" + encodeURIComponent($('#sport').val());
            return base_url + q;
        },
        limit: 10
});

我想将GET属性'sport'添加到URL中,以便我可以在后端缩小查询范围.我尝试了上面的代码但是我得到了一个JS错误.

以前版本的Bootstrap Typeahead允许这种类型的设置.这非常有用,因为每次按键都可以更新远程URL.

知道如何为这个版本做这个工作吗？

Answer 1

remote专门用于typeahead.js(不属于Bootstrap).但是你没有remote正确使用它,它可以是字符串或对象,而不是函数.

当您需要更改请求URL时,您可以使用replace:

$('#league').typeahead({
    remote: {
        url: '/typeahead/get_league?query=%QUERY',
        replace: function () {
            var q = '/typeahead/get_league?query=%QUERY';
            if ($('#sport').val()) {
                q += "&sport=" + encodeURIComponent($('#sport').val());
            }
            return base_url + q;
        }
    },
    limit: 10
 });

在这里查看文档

希望能帮助到你.

Answer 2

Hieu Nguyen解决方案不适用于%QUERY通配符.根据Bloodhound.js文档,

replace - .... 如果设置,则不会对url执行通配符替换.

在github上的Bloodhound文档

因此%QUERY将作为字符串传递,而不会被用户输入的文本替换.

所以你应该将typeahead值放入你的url:

$('#league').typeahead({
remote: {
    url: '/typeahead/get_league?query=%QUERY',
    replace: function () {
        var q = '/typeahead/get_league?query=' + $('#league').val();
        if ($('#sport').val()) {
            q += "&sport=" + encodeURIComponent($('#sport').val());
        }
        return base_url + q;
    }
},
limit: 10

});