如何配置Select2使其同时作为可搜索下拉框与可输入文本框？

解决方案 #

完全可以通过Select2原生配置实现需求，你遇到的失焦清空问题是因为默认情况下Select2只会保留下拉列表中存在的选项值，开启自定义标签（tags）功能即可解决，同时可增加手机号格式校验避免无效输入。

1. 修改后的Select2配置代码

$("#ajaxSelect2").select2({
  ajax: {
    url: "https://localhost:44343/api/Contact/Search",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      var query = {
        term: params.term,
      };
      return query;
    },
    processResults: function (result) {
      return {
        results: $.map(result, function (item) {
          return {
            id: item.phoneNo,
            text: item.firstName + ' ' + item.lastName + ' (' + item.phoneNo + ')' // 可选：追加手机号方便用户识别
          };
        }),
      };
    },
    cache: true
  },
  placeholder: 'Search Contacts or Type In Phone Number',
  allowClear: true,
  minimumInputLength: 1,
  // 新增配置开始
  tags: true, // 开启自定义标签功能，允许用户输入不在列表中的值
  createTag: function (params) {
    // 自定义标签校验：只允许符合手机号格式的输入作为有效选项
    var phoneReg = /^1[3-9]\d{9}$/; // 可根据你的业务调整手机号正则规则，支持国际号码的话修改正则即可
    if (phoneReg.test(params.term)) {
      return {
        id: params.term, // 新手机号直接作为id提交
        text: '新号码: ' + params.term, // 下拉显示标识，让用户明确这是未存储的新号码
        isNew: true // 可选自定义字段，方便前端后续判断类型
      }
    }
    return null; // 不符合格式的输入不生成自定义标签
  },
  insertTag: function (data, tag) {
    // 把自定义的新号码选项放在下拉列表最顶部，方便用户选择
    data.unshift(tag);
  }
  // 新增配置结束
});

2. 后端接收逻辑

前端提交时直接通过$("#ajaxSelect2").val()即可拿到值，不管是选择已有联系人还是输入新手机号，返回的都是手机号字符串。你在.NET Core控制器中直接用string类型参数接收即可，后续逻辑可以自行判断该号码是否存在于Contacts表，对应走已有联系人/新号码的发送流程即可。

3. 可选优化

如果需要区分用户选的是已有联系人还是新号码，可以在提交时额外判断选中项的isNew自定义字段：

// 获取选中项的附加属性
var selectedData = $('#ajaxSelect2').select2('data')[0];
var isNewNumber = selectedData?.isNew || false;

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