将 HTTP POST 与 typeahead js 和 Bloodhound js 一起使用答案

【问题标题】：Using HTTP POST with typeahead js and bloodhound js将 HTTP POST 与 typeahead js 和 Bloodhound js 一起使用
【发布时间】：2015-10-15 19:21:14
【问题描述】：

默认情况下，bloodhound.js 将通过 HTTP GET 进行查询，但这会使您容易受到JSON hijacking 的攻击。由于我有敏感信息要加载到 typeahead 中，HTTP GET 让我很容易受到攻击。曾经有一个选择帖子的选项（如下所示：typeahead.js remote beforesend post data issue），但这不适用于最新版本（v.0.11.1）。

【问题讨论】：

stackoverflow.com/a/46927923/3966458 没有 ajax

标签： javascript typeahead.js bloodhound

【解决方案1】：

我花了很多心痛和试验才得到这个。在最新版本 (v.0.11.1) 中，有一个 transport 函数选项，您可以使用它来委派您想要的任何内容（websockets，或带有帖子的普通旧 $.ajax）。

var accountBloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
        url: '/account/search#%QUERY',
        wildcard: '%QUERY',
        transport: function (opts, onSuccess, onError) {
            var url = opts.url.split("#")[0];
            var query = opts.url.split("#")[1];
            $.ajax({
                url: url,
                data: "search=" + query,
                type: "POST",
                success: onSuccess,
                error: onError,
            })
        }
    }
});

$('#remote .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: accountBloodhound 
}).bind('typeahead:select', function (ev, suggestion) {
    console.log('Selection: ' + suggestion);
});

【讨论】：

你的心痛得到了回报 ;)
在您的示例中，传输采用以下内容（opts、onSuccess、onErro），它们在哪里初始化。我很难理解 onSuccess 如何绑定到源。
@inlokesh - opts 是一个由 typeahead 创建并交给你的传输函数的对象。您可以在传输函数中设置断点/调试器命令。 onSuccess 和 onError 只是在方法成功或出错时使用/调用的回调函数。你可以看到我只是将它们批发到我的 jquery ajax 调用中，但如果你愿意，你可以调用它们。
感谢您的救命之恩！

【解决方案2】：

这个Link 会有所帮助

var searchAuto = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: base_url + 'ajax/get_words',
        prepare: function (q, rq) {

            $(".typeahead-loader").show();

            rq.data = {
                q: $("#SearchData").val(),
                // source: 'S01',
                searchtype: $("#Searchtype").val(),
                language: $("#language").val(),
                author: $("#author").val(),
                raag: $("#raag").val(),
                page_from: $("#page_from").val(),
                page_to: $("#page_to").val()
            };
            return rq;
        },
        transport: function (obj, onS, onE) {

            $.ajax(obj).done(done).fail(fail).always(always);

            function done(data, textStatus, request) {
                // Don't forget to fire the callback for Bloodhound
                onS(data);
            }

            function fail(request, textStatus, errorThrown) {
                // Don't forget the error callback for Bloodhound
                onE(errorThrown);
            }

            function always() {
                $(".typeahead-loader").hide();
            }
        }
    }
});

如果你 console.log obj，即第一个参数，你会得到

您可以轻松覆盖obj 中的type

obj.type = 'POST'

希望这会有所帮助...

【讨论】：