select2是Bootstrap中一个很好用的插件,公司总的项目的下拉选择框用的是这个插件。
最近有一个需求,就是用户点击下拉选择框之后,如果没有找到选项,可以在下拉框输入自定义的选项,然后点击选项,然后生成一个标签。
我查了一下select2的文档,其中一个属性是加入tag:true后则可以自定义输入,
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true,//开启自定义输入选项
tokenSeparators: [',', ' ']//按逗号生成标签
});
</script>
开启之后就可以由用户输入内容,然后按逗号就可以生成标签。注意的是生成标签只有下拉框是多选的时候才起作用。
加入以上代码以为就这样轻松解决问题了?不是。。。我在谷歌浏览器试了一下,发现在输入中文的时候会出现一个诡异的情况,就是输入不了中文。在网上查了很多方法,其中看到一个方法,就是在输入时是在后面加入一个逗号,然后再按一次逗号生成标签。
那篇文章的链接是这个https://blog.csdn.net/jx520/article/details/82219398
这个方法很不错。提供的思路也不错。可是有个问题,就是用户要输入选项后需要按两次逗号才可以生成标签,如果用户只按一次逗号,后面再输入内容,再按逗号,会生成很多错误的内容。所以只能让用户只按一次就可以了。
$('#select_list').select2({
tags: true,
placeholder: "新增選項",
tokenSeparators: [";"],
language: { noResults: function (params) { return "查無結果"; } },
createTag: function(params) {//解决部分浏览器开启 tags: true 后无法输入中文的BUG
if (/[;]/.test(params.term)) {
var str = params.term.trim().replace(/[;]*$/, '');
return { id: str , text: str }
}
}
});
以上是解决用户输入不了中文问题,只让他输入中文,而不让他插入数据。
以下是一键插入,同时生成标签。
//输入内容后生成按回车键即可
$(document).on('keyup', '.select2-selection--multiple .select2-search__field', function(event){
if(event.keyCode == 13){//这个是回车键的键值,如果要按其他键,把键值换成其他键值就可以了
var $this = $(this);
var optionText = $this.val();//输入内容的value值
//如果没有就添加
if(optionText != "" && $this.find("option[value='" + optionText + "']").length === 0){
//我还不知道怎么优雅的定位到input对应的select
var $select = $this.parents('.select2-container').prev("select");
var newOption = new Option( optionText,optionText, true, true);//定义一个新的option,设置option的值是输入框的内容
$select.append(newOption).trigger('change');//在插入的时候同时生成标签
$this.val('');//清空输入框的内容
}
}
});