Question

我正在尝试使用添加属性来调用我的远程网址。

现在我有这个工作：

$('#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，它可以是字符串或对象，而不是函数。

如果您需要更改请求网址，可以使用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
 });

检查文档here

希望它有所帮助。

Answer 2

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

replace - .... 如果设置，则不会对网址执行通配符替换。

Bloodhound docs on github

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

所以你应该将typeahead值放入你的网址：

$('#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

}）;

Answer 3

以下是QUERY结果的完整示例。请注意，使用远程方法时，变量替换不再起作用。感谢大多数人hieu-nguyen！

jQuery('#city').typeahead({
    name: "cities",
    remote: {
        url: current_web_root + '?action=ajax|getcities&query=%QUERY',
        replace: function () {
            var q = current_web_root + '?action=ajax|getcities&query=' + jQuery('#city').val();
            if (jQuery('#state').val()) {
                q += "&state=" + encodeURIComponent(jQuery('#state').val());
            }
            return q;
        }
    },      
    cache: false
}); 

jQuery("#state").change(function (e) {
    jQuery('#city').val("");
});

Bootstrap 3 typeahead.js - 远程url属性

3 个答案: