Bootstrap 3的typeahead.js - 远程URL属性

Question

我将尝试调用远程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
});

我想在URL中添加GET属性'sport'，以便在后端缩小查询范围。我尝试了上面的代码，但出现了JS错误。

Bootstrap Typeahead的旧版本允许这种设置。它非常有用，因为我可以每次按键时更新远程URL。

有什么办法让这个版本也能实现这个功能吗？

- koxon

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

请在这里查看文档。

希望能帮到您。

- Hieu Nguyen

---

我正在使用typeahead.js。 我的问题在于我无法使用函数。因为我需要在init中设置我的URL，而#sport还没有包含任何值。这就是为什么我想每次按键时都设置它，而不是提前设置...我能够使用bootstrap 2.0 typeahead做到这一点，但现在使用typeahead.js我不能...这是一个很大的缺点。有什么办法可以解决这个问题吗？ - koxon

Answer 2

Hieu Nguyen 的解决方案无法处理 %QUERY 通配符。 根据 Bloodhound.js 文档，

replace – .... 如果设置，则 url 不会执行通配符替换。 Bloodhound 在 Github 上的文档 因此，%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

});

- aKiRa

---

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以在自己的帖子上发表评论，并且一旦您拥有足够的声望，您将能够评论任何帖子。 - fredtantini

@fredtantini：我无法添加评论，所以不得不发帖。当然，您可以基于“形式主义”关闭响应，但请下次花时间理解帖子，并将其内容报告为评论，因为像我这样的新用户的考虑有时可以为那些阅读标记为已接受的响应的人节省很多时间。 - aKiRa

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

- Lucky Edward