Select2结合Ajax实现无匹配结果时才允许创建标签 解决邮编重复返回问题

问题根源 #

重复项由createSearchChoice配置的默认逻辑导致：该函数会无视后端接口返回的匹配结果，无条件为当前用户输入的搜索词生成一条纯邮编的自定义选项，因此当后端返回已入库的邮编数据时，就会同时出现「接口返回的带城市名邮编」和「自动生成的纯邮编」两条重复结果。

修复方案 #

在createSearchChoice中增加判断逻辑：仅当用户输入的邮编未在接口返回的结果中存在时，才生成自定义选项，否则不生成。

修改后的完整代码 #

import $ from 'jquery';
import 'Select2/select2';
import 'Select2/select2_locale_fr';

// 存储后端返回的已存在邮编ID集合
let existedZipCodes = new Set();

$('#postal_code_search_zipcode').select2({
    minimumInputLength: 5,
    maximumInputLength: 5,
    maximumSelectionLength: 1,
    formatNoMatches: function() {
        return '';
    },
    language: 'fr',
    createSearchChoice: function (term) {
        const trimmedTerm = $.trim(term);
        // 邮编已存在于后端返回结果中则不生成自定义选项
        if (existedZipCodes.has(trimmedTerm)) {
            return null;
        }
        return {
            id: trimmedTerm,
            text: trimmedTerm
        };
    },
    ajax: {
        cache: false,
        url: $('#postal_code_search_zipcode').data('autocomplete-url'),
        delay: 250,
        dataType: 'json',
        data: params => ({
            q: params || '',
        }),
        processResults: data => {
            const results = Object.keys(data).map(value => ({
                id: value,
                text: data[value]
            }));
            // 每次请求后更新已存在邮编集合
            existedZipCodes.clear();
            results.forEach(item => existedZipCodes.add($.trim(item.id)));
            return { results };
        }
    }
});

补充说明 #

• 如果判断逻辑未生效，可检查后端返回的邮编ID类型是否和用户输入的字符串类型一致，必要时可将两者都转为字符串后再做匹配
• 如果你使用的是Select2 4.x及以上版本，createSearchChoice 已更名为 createTag，逻辑调整方式和上述方案一致

内容的提问来源于stack exchange，提问作者Micka Bup