jquery - Twitter 的 typeahead-bloodhound : What is the equivalent of "%QUERY" when using ajax. 数据和 POST？

Question

如果使用 Bloodhound 和 GET:

// Typeahead
personsBloodhound = new Bloodhound({
    datumTokenizer: function (person) { return person.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/ajax/Persons/List?nameContains=%QUERY',
        ajax: {
            beforeSend: function(xhr) {
                $(".searching-person").show();
            },
            data: {
                "pageSize": 4,
                "otherParam1": "blah",
                "otherParam2": "bleh",
            }
        },
        filter: function (response) {
            $(".searching-person").hide();
            return response.persons;
        }
    }
});

只需在 URL 中使用 %QUERY 即可。

现在....
如果使用带有 POST 的 Bloodhound，我应该使用什么来代替 %QUERY？

// Typeahead
personsBloodhound = new Bloodhound({
    datumTokenizer: function (person) { return person.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/ajax/Persons/List',
        ajax: {
            type: "POST",
            beforeSend: function(xhr) {
                $(".searching-person").show();
            },
            data: {
                "nameContains": ....WHAT GOES HERE?????......
                "pageSize": 4,
                "otherParam1": "blah",
                "otherParam2": "bleh",
            }
        },
        filter: function (response) {
            $(".searching-person").hide();
            return response.persons;
        }
    }
});

如果不清楚，问题是:
在 Bloodhound 的 Remote 中使用 POST 时，相当于 %QUERY 的是什么？

文档对此并不清楚，(证明): https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

还尝试使用:

 "nameContains": $("#my-input-that-uses-typeahead").val(),

但没有成功。

Answer 1

在 Bloodhound 的 Remote 中使用 POST 时，相当于 %QUERY 是 query。

这是一个简单的示例(带有详细说明)，您可以将其用于 GET 和 POST。如您所见，我声明了一个变量 isExtendUrl。如果将此设置为 true，则查询(您输入的内容)将添加到 url 的末尾(您必须以某种方式给出 myurl)。

下一个变量是isRequestMethod。如果将此设置为 POST，您可以使用 Bloodhound 进行 POST 调用，否则您可以将其用于 GET 调用。如您所见，prepare 函数有两个参数query 和setting。 query 是您输入的内容。如果您只想进行 POST 调用而不使用 GET，则将 prepare 键值对移至 remote 对象内。

因此，如果您必须使用 JSON 正文作为 {gender: 'MALE', name: 'what is typed'} 进行 POST调用。您可以拥有一个包含所有键值对的初始查询对象，例如:initialQuery = {gender: 'MALE'}，以及应添加到的键searchKey >initialQuery 搜索时，可以添加在 prepare 上，如 initialQuery[searchKey] = query。

最后，如果您的 POST 调用的响应对象是一个对象，并且您必须使用 filter 提取特定的键值。例如:假设您的响应对象是

{
  status: 'some status', 
  content: [{array}, {of}, {objects}, ...], 
  someKey: someValue
} 

并且您必须获取content，然后返回data.content。这是一个完整的例子

let isExtendUrl = true; //to add query at the end of the url, usually used with GET
let isRequestMethod = 'POST';
let initialQuery = {gender: 'MALE'};
let searchKey = 'name';

let bloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
        url: isExtendUrl ? myurl + '%QUERY' : myurl,
        wildcard: '%QUERY',
        filter: function (data) {
            return $.map(data.content, function (obj) {
                return obj;
            });
        }
    }
});

if (isRequestMethod == 'POST') {
    let prepare = function (query, settings) {
        initialQuery[searchKey] = query;
        settings.type = "POST";
        settings.contentType = "application/json; charset=UTF-8";
        settings.data = JSON.stringify(initialQuery);

        return settings;
    }
    bloodhound.remote.prepare = prepare;
}