Результаты удаленных данных Select2 не загружаются достаточно быстро, всегда на 1+ символов позади [Aurelia, TypeScript, Swagger]

Question

Я использую опцию удаленных данных Select2 (версия 4.0.6-rc.1) для загрузки результатов из вызова Swagger API.Я не смог найти много документации по загрузке данных на стороне сервера, так что это может быть проблемой, так как я использую небольшой обходной путь.Раскрывающийся список не загружает самый последний param.term результат.

В основном только с использованием специфических для Aurelia функций, где я ссылаюсь на <select>.

HTML:

<select class="select2" ref="referenceToHTMLSelect2"></select>

Код:

optionsInSelect2Format = { text: string, id: string }[];
theSelect2: any;
variableId: string;
variableName: string;

public initializeSelect2() {
    this.theSelect2 = $(this.referenceToHTMLSelect2).select2({
        placeholder: 'Select',
        width: '100%',
        minimumInputLength: 1,
        language: {
            inputTooShort: () => {
                return 'Enter at least 1 character to search'
            }
        },
        ajax: {
            url: (params) => {
                this.apiCall(params.term, "hardCodedStringNeededToExecuteAPICall");
            },
            processResults: (params) => {
                return {
                    results: this.optionsInSelect2Format
                }
            }
        }
    });
    this.theSelect2.on('select2:select', (e) => {
        let data = this.theSelect2.select2('data')[0];
        this.variableId = data.id;
        this.variableName = data.text;

    });
}

Вызов API:

public apiCall (searchTerm: string, type: string) {
    return this.service.search(seachTerm, type)
        .then(response => {
            if (response.status === 200) {
                const rawJSON = response.result;
                    this.optionsInSelect2Format = [];
                    //Lodash ForEach
                    _.forEach(rawJSON, (entry) => {
                        this.optionsInSelect2Format.push({
                            text: entry.entryName,
                            id: entry.entryID
                        });
                    });
                    return this.optionsInSelect2Format;
                }
            }
        })
        .catch(error => {
            //Error message
        });

Вызов API вызывается каждый раз, когда пользователь вводит данные, но перезагрузка раскрывающегося списка не происходит надежно.Кажется, что выпадающий список перезагружается после того, как первый или второй символы введены, и данные, которые он загружает в выпадающий список, отстают от фактического param.term.Например, пользователь вводит «i» и ничего не загружается, пользователь следует «i» с «t», и вместо результатов «it», загружаемых в раскрывающийся список, загружаются результаты «i».

Я вижу, что массив optionsInSelect2Format обновлен до результатов "it".Это асинхронная проблема?

GIF поведения:

Select2 недостаточно быстро заполняет раскрывающийся список

Answer 1

Из моего ограниченного понимания Select2 ожидается, что ajax.url вернет URL-адрес, который вызовет select2, результаты которого затем будут переданы в processResults.

Вместо возврата URL-адреса select2Вы сами вызываете API и возвращаете результаты из него.Я не верю, что функция url на самом деле ожидается, поэтому вот (вероятно), что происходит:

1. Select2 вызывает url, чтобы получить URL, ваш this.apiCall вызывается
2. С результатом url (который не определен), select2 пытается сделать вызов и не может - так что я предполагаю, что он ничего не делает
3. processResults немедленно вызываетсясинхронно (пока ваш apiCall все еще выполняется) и this.optionsInSelect2Format просто еще не обновлены.

Вы должны либо полностью позволить select2 обработать вызов API для вас (фактически дать ему URL и обработать)данные соответственно), или вы должны полностью обработать их самостоятельно.

В последнем случае вы можете подписаться на событие change.select2 (не уверенное, срабатывает ли оно, когда пользователь что-то печатает) и чтоСобытие вызывает единственный метод, который вызывает ваш API, ожидает возвращения данных и устанавливает новый источник данных.Используйте свойство data вместо свойства ajax.

Это может работать, если вы просто оставите свой код таким, какой он есть, и установите для свойства data значение this.optionsInSelect2Format, нотебе придется попробовать это.