Ищейка типа Твиттера: что эквивалентно %QUERY при использовании ajax.data и POST?

Если кто-то использует 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;
        }
    }
});

Просто используйте %QUERY в URL-адресе.

Теперь....
Если кто-то использует 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;
        }
    }
});

Если это неясно, вопрос:
Что эквивалентно %QUERY при использовании POST в пульте Bloodhound?

В документации нет ясности по этому поводу (доказательство): https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

Также пробовал использовать:

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

Но не сработало.


person sports    schedule 08.06.2014    source источник


Ответы (3)


Вы должны каким-то образом изменить URL-адрес, иначе ищейка не отправит другой запрос (см. 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) и функцией beforeSend в настройках ajax.

Я собираюсь подать вопрос об этом поведении. Использование Bloodhound для POST-запросов ОЧЕНЬ неудобно и лишает простоты, заложенной в typeahead.js.

ИЗМЕНИТЬ:

Также убедитесь, что вы установили новое значение для данных в beforeSend и установили settings.hasContent = true. В противном случае будут использоваться исходные данные.

Пример того, как это делается: https://github.com/twitter/typeahead.js/issues/542#issuecomment-29995960.

person Maurice Schleußinger    schedule 27.08.2014
comment
немного некрасиво, но ладно... принято, также в ссылке автор typeahead поддерживает ваш ответ - person sports; 29.08.2014
comment
Он также ответил мне на Github: github.com/twitter/typeahead.js /проблемы/. Кажется, он хочет изменить это поведение в следующем выпуске. - person Maurice Schleußinger; 29.08.2014

Эквивалентом %QUERY при использовании POST в пульте Bloodhound является query.

Вот простой пример (с подробным объяснением), где вы можете использовать его как для GET, так и для POST. Как видите, я объявил переменную isExtendUrl. Если для этого параметра установлено значение true, то запрос (то, что вы вводите) будет добавлен в конец URL-адреса (вы должны каким-то образом указать myurl).

Следующая переменная — isRequestMethod. Если установлено значение POST, вы можете использовать ищейку для вызовов POST, иначе вы можете использовать ее для вызовов GET. Как видите, функция prepare имеет два параметра query и setting. query - это то, что вы вводите. Если вам просто нужен вызов POST без GET, переместите пару "ключ-значение" prepare внутрь объекта remote.

Итак, если вам нужно использовать JSON body как {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;
}
person Saahithyan Vigneswaran    schedule 25.10.2017

Правильно, после дальнейшего изучения ищейки подстановочный знак - это то, что нужно заменить, а не значение.

Он нигде не хранит строку запроса. На queryChanged срабатывает и фильтрует удаленный ответ. Похоже, вам придется получить запрос самостоятельно.

"nameContains": $('input#search').val()
person Lex    schedule 26.06.2014
comment
так как мне передать подстановочный знак на пульте дистанционного управления, который использует POST ajax? - person sports; 27.06.2014
comment
Хорошо, что подстановочный знак был именно тем, что нужно заменить в URL-адресе GET, а не запросом для отправки. - person Lex; 27.06.2014