Select2 удаленный поиск данных после получения всех данных

Select2 работает почти так, как я хочу. Он загружает все удаленные данные и корректно форматирует их при изменении другого поля. Я хочу добавить обратно в функцию поиска извлеченных данных, т.е. после извлечения данных пользователь может выполнить поиск в списке по заголовку (result.title).

В приведенном ниже примере данные извлекаются, но условие поиска не фильтруется. Важно, чтобы все удаленные данные были загружены до того, как пользователю придется искать результат.

Если я не могу добавить возможность поиска, как мне отключить окно поиска? Если я установлю «minimumResultsForSearch: -1», поле select2 по-прежнему позволит мне искать?

пример

    var $company2 = $(".company2");
    $company2.select2().on('change', function() {
        if ($company2.val() !== null) {
            $('.unmaintained2').select2({
                allowClear: true,
                minimumResultsForSearch: 1,
                ajax: {
                    url: "/api/unmaintained2/" + $company2.val(),
                    processResults: function (data) {
                        return {
                            results: data,
                        };
                    },
                    dataType: 'json',
                    cache: true,
                },
                escapeMarkup: function(m) {
                    return m;
                },
                templateResult: function (result) {
                    if (result.loading) return 'Loading...';
                    return result.text + '<h6>' + result.make + ' ' + result.category + '</h6>';
                },
            });
        };
    });

javascript ajax jquery-select2 jquery-select2-4
person Matthew Malone    schedule 21.11.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Существует опция поиска под названием matcher. См. документы

https://select2.org/searching#customizing-how-results-are-matched

Но это вы можете использовать только с локальными предоставленными данными.

Если вы используете удаленные данные, select2 ожидает, что данные будут возвращены уже отфильтрованными.

matcher работает только с локально предоставленными данными (например, через массив! Когда используется удаленный набор данных, Select2 ожидает, что возвращенные результаты уже были отфильтрованы на стороне сервера.

Поэтому я думаю, что вы не можете использовать этот способ с опцией ajax.

Возможно, вы можете загрузить данные при загрузке страницы, а затем добавить возвращенные данные как options в поле выбора. Затем инициализируйте поле select2 с опцией matcher.

ОБНОВЛЕНИЕ:

Я немного поиграл, и вы можете отформатировать результаты поиска после загрузки всех параметров. Проверьте этот код:

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var state1 = state.text + '<h6>(' + state.id  + ') ' + state.text + '</h6>';
  return state1;
};

function selection(state) {
    return state.text;
}

function makeSelect2(data) {
    $('#selectBox').select2({
        data: data,
        templateSelection: selection,
        templateResult: formatState,
        escapeMarkup: function (state) {
            return state;
        },
    });
}

$(document).ready(function() {
    $.ajax({
        type: "POST",
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
        }),
        success: function (data) {
            makeSelect2(data);
        }
    });
});

На $(document).ready опции загружаются через ajax. После успешного ajax результата вызывается функция makeSelect2 с результатом запроса ajax. В функции makeSelect2 поле select2 инициализируется заданными данными, и с помощью параметров templateSelection и templateResult вы можете изменить внешний вид результатов поиска.

Надеюсь, это то, что вы ожидаете.

person dns_nx    schedule 21.11.2017
comment
Спасибо - я так и думал! Раньше у меня было select2, добавляющее каждый элемент в качестве опции, но я не знаю, как использовать с этим функцию templateResult? - person Matthew Malone; 21.11.2017
comment
Я кое-что тестирую. Я сообщу вам результаты моего теста. - person dns_nx; 21.11.2017

arrow_upward
0
arrow_downward

Благодаря @dns_nx ниже приведено окончательное решение! Select2 теперь доступен для поиска (на стороне клиента) и шаблонов с удаленными данными!

$(document).ready(function() {
    var $company2 = $(".company2");
    var $equipment2 = $(".equipment2");
    $company2.select2().on('change', function() {
        $equipment2.empty();
        if ($company2.val() !== null) {
            $.ajax({
                url: "{{ url('/') }}" + "/api/unmaintained2/" + $company2.val(),
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function(data) {
                    $equipment2.select2({
                        data: data,
                        templateSelection: function(result) {
                            return result.text;
                        },
                        templateResult: function(result) {
                            if (!result.id) {
                                return result.text;
                            }
                            var final = '<h2>'+ result.serial + '</h2><h5>(' + result.make  + ') ' + result.category + '</h5>';
                            return final;
                        },
                        escapeMarkup: function(result) {
                            return result;
                        },
                    });
                }
            });
        }
    }).trigger('change');
});
person Matthew Malone    schedule 22.11.2017