3

如果有人使用带有 GET 的 Bloodhound：

// 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。

现在....
如果有人将 Bloodhound 与 POST 一起使用，我应该使用什么来代替 %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 的遥控器中使用 POST
相当于什么？%QUERY

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

还尝试使用：

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

但是没有用。

4

3 回答 3

1

%QUERY在 Bloodhound 的遥控器中使用 POST 时等价于query.

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

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

所以，如果你必须使用JSONbody 作为{gender: 'MALE', name: 'what is typed'}你的POST电话。您可以拥有一个包含所有键值对的初始查询对象，例如：initialQuery = {gender: 'MALE'}，并且在搜索时searchKey应该添加的键可以添加到like 。initialQueryprepareinitialQuery[searchKey] = query

最后，如果您POST调用的响应对象是一个对象，并且您必须提取一个特定的键值 use 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;
}
于 2017-10-25T08:48:31.010 回答
0

您必须以某种方式更改 URL，否则 Bloodhound 不会发送其他请求（请参阅https://stackoverflow.com/a/24025789/2175370）并且 livesearch/typeahead 将无法工作。

因此("#my-input-that-uses-typeahead").val()，与动态 URL（例如http://127.0.0.1:1234/REST_API/_search?useless=%QUERY）和beforeSendajax 设置中的 -function 结合使用就可以了。

我要提出一个关于这种行为的问题。使用 Bloodhound 进行 POST 请求非常尴尬，并且消除了 typeahead.js 的简单性。

编辑：

还要确保为 inbeforeSend和 set中的数据设置新值settings.hasContent = true。否则将使用初始数据。

有关如何完成的示例：https ://github.com/twitter/typeahead.js/issues/542#issuecomment-29995960 。

于 2014-08-27T12:09:35.397 回答
0

对，在进一步查看 Bloodhound 之后，通配符只是要替换的而不是值。

它不会将查询字符串存储在任何地方。在queryChanged火灾和过滤器远程响应。看起来您必须自己获取查询。

"nameContains": $('input#search').val()
于 2014-06-26T12:20:35.823 回答