jquery.select2 有的值自动补全，没有的直接输入

这个需求可以用 Select2 的 tags 模式来实现：

1.如果银行在下拉列表里，就选择已有的；

2.如果没有，就可以直接输入新值并回车；

<!– 引入 select2 –>
<link href=”https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css” rel=”stylesheet” />
<script src=”https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js”></script>

<select id=”bank” style=”width:300px”>
<option value=”中国工商银行”>中国工商银行</option>
<option value=”农业银行”>农业银行</option>
<option value=”建设银行”>建设银行</option>
<option value=”中国银行”>中国银行</option>
<option value=”中国邮政”>中国邮政</option>
<option value=”招商银行”>招商银行</option>
<option value=”浦发银行”>浦发银行</option>
<option value=”中信银行”>中信银行</option>
<option value=”光大银行”>光大银行</option>
<option value=”民生银行”>民生银行</option>
<option value=”广发银行”>广发银行</option>
<option value=”华夏银行”>华夏银行</option>
<option value=”平安银行”>平安银行</option>
<option value=”兴业银行”>兴业银行</option>
<option value=”北京银行”>北京银行</option>
<option value=”上海银行”>上海银行</option>
</select>

<script>
$(document).ready(function() {
$("#bank").select2({
language: "<?php echo empty($language)?'zh-CN':$language; ?>",
placeholder: "请选择或输入银行",
minimumInputLength: 1,
allowClear: true, // 允许清空
tags: true, // 开启自定义输入
createTag: function (params) {
    var term = $.trim(params.term);
    if (term === '') return null;

    return {
        id: term,
        text: term + ' (自定义)',
        name: term,
        newOption: true
    };
},
templateResult: function (data) {
    // 自定义选项的显示样式
    if (data.newOption) {
        return $('<span>+ 创建 "' + data.name + '"</span>');
    }
    return data.text;
},
language: {
    inputTooShort: function () {
        return "请输入至少 1 个字符";
    },
    noResults: function () {
        return "无匹配结果，可直接输入新建";
    }
}
}).on('select2:select', function (e) {
    var data = e.params.data;
    ...
});
});
</script>

升级：

3.只有在没有数据时才可以自定义

<script>
var select2ResultsCache = [];
$(document).ready(function() {
$("#bank").select2({
language: "<?php echo empty($language)?'zh-CN':$language; ?>",
placeholder: "请选择或输入银行",
minimumInputLength: 1,
allowClear: true, // 允许清空
tags: true, // 开启自定义输入
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') return null;

// 只有当无搜索结果时，才允许创建自定义项
if (select2ResultsCache && select2ResultsCache.length > 0) {
return null;
}

return {
id: term,
text: term + ' (自定义)',
name: term,
newOption: true
};
},
templateResult: function (data) {
// 自定义选项的显示样式
if (data.newOption) {
return $('<span>+ 创建 "' + data.name + '"</span>');
}
return data.text;
},
language: {
inputTooShort: function () {
return "请输入至少 1 个字符";
},
noResults: function () {
return "无匹配结果，可直接输入新建";
}
}
}).on('select2:select', function (e) {
var data = e.params.data;
...
}).on('select2:unselecting', function (e) {
$(this).select2('open');
});
});
</script>

升级：

4.minimumInputLength: 1 和 allowClear: true “冲突现象”