选择2下拉列表，但允许新的价值由用户？

小开

最佳答案

在 Select23.5.2及以下版本中，您可以使用如下代码:

$(selector).select2({
minimumInputLength:1,
"ajax": {
data:function (term, page) {
return { term:term, page:page };
},
dataType:"json",
quietMillis:100,
results: function (data, page) {
return {results: data.results};
},
"url": url
},
id: function(object) {
return object.text;
},
//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
});

(取自 select2邮件列表中的一个答案，但现在找不到链接)

小开

只是为了保持代码活着，我张贴 @ rrauenza Fiddle’s code从他的评论。

超文本标示语言

<input type='hidden' id='tags' style='width:300px'/>

JQuery

$("#tags").select2({
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0;
}).length===0)
{return {id:term, text:term};}
},
multiple: false,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

小开

改进@fmpWizard 回答:

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
}).length===0) {
return {id:term, text:term};
}
},


//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

小开

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

在大多数情况下，我们需要比较不敏感寄存器的值。这段代码将返回 false，这将导致在数据库中创建重复记录。此外，浏览器 Safary 不支持 String.Prototype.localeCompare () ，此代码不能在此浏览器中工作;

return this.text.localeCompare(term)===0;

将更好地取代

return this.text.toLowerCase() === term.toLowerCase();

小开

谢谢你们的帮助，我在 Codeigniter 中使用了下面的代码，我使用的是 select2的3.5.2版本。

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
ajax: {
url: location_url,
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
results = [];
$.each(data, function(index, item){
results.push({
id: item.location_id,
text: item.location_name
});
});
return {
results: results
};
}
},
//Allow manually entered text in drop down.
createSearchChoice:function(term, results) {
if ($(results).filter( function() {
return term.localeCompare(this.text)===0;
}).length===0) {
return {id:term, text:term + ' [New]'};
}
},
});

小开

@ fmpWizard提供的答得好适用于 Select23.5.2及以下的 但是它在4.0版本中无法工作。

从很早以前(但可能没有这个问题那么早) ，Select2就支持“标记”: 如果允许，用户可以在其中添加自己的价值。这可以通过 tags选项启用，您可以使用文档中的一个例子。

$("select").select2({
tags: true
});

默认情况下，这将创建一个与所输入的搜索词具有相同文本的选项。如果希望以特殊方式标记对象，可以修改使用的对象，或者在选定对象后远程创建该对象。

$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});

除了作为通过 select2:select事件传入的对象上的一个容易定位标志之外，额外的属性还允许您在结果中以略微不同的方式呈现该选项。因此，如果您想通过在它旁边放置“ (新)”来直观地表明它是一个新选项，那么您可以这样做。

$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");


$result.text(data.text);


if (data.newOption) {
$result.append(" <em>(new)</em>");
}


return $result;
}
});

小开

由于这些答案中有许多在4.0 + 中无法工作，所以如果您使用 ajax，您可以让服务器添加新值作为一个选项。它是这样工作的:

用户搜索值(向服务器发出 ajax 请求)
如果发现值很大，返回该选项。如果不只是让服务器添加这样的选项: [{"text":" my NEW option)","id":"0"}]
提交表单时，只需检查该选项是否在数据库中，如果没有创建，则在保存之前进行创建。

小开

我刚从凯文 · 布朗那里偶然发现了这个。 Https://stackoverflow.com/a/30019966/112680

对于 v4.0.6，您所要做的就是使用 tags: true参数。

小开

我认为现在有一个更好的解决办法

只需在选择选项上将标记设置为 true 即可？

tags: true

从 https://select2.org/tagging