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。例如。用户类型＆＃34; i＆＃34;没有任何东西被加载，用户跟随＆＃34;我＆＃34;用＆＃34; t＆＃34;而不是＆＃34;它＆＃34;结果被加载到下拉列表中，＆＃34; i＆＃34;结果已加载。

我确实看到optionsInSelect2Format数组已更新为＆＃34;它＆＃34;结果。这是一个异步问题吗？

行为的GIF：

Select2 does not repopulate the dropdown fast enough

Answer 1

根据我对Select2的有限理解，ajax.url应返回select2将调用的网址，然后将其结果传递到processResults。

不是将网址返回给select2，而是直接自己调用API并从中返回结果。我不相信url函数实际上是等待的，所以这里（可能）会发生什么：

选择2次调用url获取网址，调用this.apiCall
使用url（未定义）的结果，select2尝试拨打电话而不能 - 所以我猜它没有做任何事情
processResults会立即同步调用（当您的apiCall仍在执行时）this.optionsInSelect2Format尚未更新。

你应该完全让select2为你处理api调用（实际上给它一个url并相应地处理数据），或者你应该自己完全处理它。

在后一种情况下，您可以订阅change.select2事件（不确定是否在用户输入内容时触发）并在该事件上调用调用api的单个方法，等待数据要返回，然后设置新的数据源。使用data属性而不是ajax属性。

可能可以工作，如果您只是保持代码不变并将data属性设置为this.optionsInSelect2Format，但您必须尝试。

Select2远程数据结果没有足够快地重新加载，总是落后1个字符[Aurelia，TypeScript，Swagger]

1 个答案: