javascript - 在 ajax 搜索完成之前将标签添加到 select2

Question

目前我的 select2 使用 ajax 请求，我可以从 php 文件中检索数据。

现在我要完成的是:

• 允许用户在 ajax 请求完成之前添加标签。
• 如果添加了标签，则停止请求。

我需要允许用户在 ajax 完成之前添加标签的原因。是因为 ajax 可能需要一些时间(搜索大量数据)

下面是我select2的选项内容。我正在使用 vue2，并且 select2 已经成为它自己的组件，我们传入了选项。

tags: true,
width: '100%',
multiple: false,
maximumSelectionSize: 1,
ajax: {
    url: this.$webRoute('ajaxController'),
    dataType: 'json',
    delay: 250,
    data: function (params) {
        return {
            q: params.term, // search term
            page: params.page
        };
    },
    processResults: function (data, params) {
        var mappedData = _.map(data, function(o){
                var text = o.member_number + ' - ' + o.first + ' ' + o.last + ' (' + o.st_number + ' ' + o.st_predir + ' ' + o.street + ' ' + o.st_type + ' ' + o.st_dir + ' ' + o.unit + ' ' + o.section + ' ' + o.city + ' ' + o.state + ' ' + o.zip5 +')';
                return {id: o.member_number, text: text};
        })

        params.page = params.page || 1;

        return {
            results: mappedData,
            pagination: {
                more: (params.page * 30) < mappedData.total_count
            }
        };
    },
    cache: true
},
minimumInputLength: 3,

Answer 1

对于希望能够在 ajax 完成之前添加标签的任何人，这是我编写的解决方案。进入传输方法后，它会成功触发，从而返回标签。即使 axios 是，它也会触发另一个成功，然后它将结果附加到选项列表

tags: true,
width: '100%',
multiple: false,
createTag: function (params) {
    return {
        id: params.term,
        text: params.term,
        newTag: true
    }
},
insertTag: function (data, tag) {
    data.push(tag);
},
ajax: {
    delay: 250,
    transport: function (params, success, failure) {

        success([""]);

        if (params.data.term !== undefined) {
            axios({
                url: vm.$webRoute('ajaxController'),
                responseType: 'json',
                method: 'post',
                timeout: 1000,
                data: {
                    q: params.data.term
                }
            }).then(function(response){
                if (response == -1) {
                    failure();
                }else{
                    success(response);
                }
            }).catch(function (error) {
                failure();
            });
        }
    },

    processResults: function (data) {
        var mappedData = [{}];
        if (data[0].data !== undefined) {
            var mappedData = _.map(data[0].data, function(o){
                //process data
                return {id: o.member_number, text: text};
            })
        }else if(data[0].id !== undefined){
            mappedData.push({id: data[0].id, text: data[0].text});
        }

        return {
            results: mappedData,
            pagination: {
                more: false
            }
        };
    }
},
maximumSelectionSize: 1,