我am using select 2,它很棒.我有一个例子,用户通过ajax从下拉列表中选择(与链接中列出的远程数据示例完全相同),但我希望用户能够搜索以及能够键入新值t存在于后端.
我有这个工作在multiselect但尝试看看使用单个下拉选项时是否有相同的支持?
最佳答案
根据我的理解你想要的是使用单一选择框,用户可以从ajax源中选择,也可以自由键入文本.
此外,您已经有ajax部分工作,您唯一想知道的是添加用户键入的自由文本.
这是一个使用的Working Fiddle Select2插件版本是4.0.3
所以工作片段
$(".js-data-example-ajax").select2({
language: {
noResults: function() {
return "No results found,
.select2-container {
width: 100% !important;
}
所需的更改是.
1)我们需要更改自定义消息未显示结果的方式.我们需要在这里有一个选项,无论如何都要添加打字文本.因此,添加语言选项并在其中添加noResults选项,并在未找到结果时提供自定义消息.在这个自定义消息中,我们添加了一个按钮,我们编写了更多逻辑,将这个免费类型的文本添加到我们的下拉列表中.
代码如下
$(".js-data-example-ajax").select2({
language: {
noResults: function() {
return "No results found,//... your other setting
};
2)现在进行了上述更改我们需要添加额外的代码来处理按钮的click事件,以将这个新选项添加到我们的插件中.代码如下.
$(document).on('click',function() {
var $select2 = $(".js-data-example-ajax");
var newStateVal = $select2.siblings("span.select2-container").find("input.select2-search__field").val();
//Get the new value.
if ($select2.find("option[value=" + newStateVal + "]").length) { //if already present just select it
$select2.val(newStateVal).trigger("change");
} else {
// Create the DOM option that is pre-selected by default
var newState = new Option(newStateVal,true);
// Append it to the select
$select2.append(newState).trigger('change');
$select2.select2('close');
}
});
有了这个,插件就能够从ajax和free类型中选择值.这是一个选择的例子,因为这是你想要的.
希望这有帮助!!