Answers:
对于版本4+,请在下面通过Kevin Brown查看此答案
在Select2 3.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邮件列表上的答案,但现在找不到链接)
selectOnBlur: true
将做的工作,请参阅:stackoverflow.com/questions/25616520/...
tags: []
一起使用createSearchChoice
。
@fmpwizard提供的出色答案适用于Select2 3.5.2及更低版本,但不适用于4.0.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;
}
});
为了使代码保持生命力,我从他的评论中发布@rrauenza Fiddle的代码。
的HTML
<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
我刚从凯文·布朗(Kevin Brown)偶然发现这一点。 https://stackoverflow.com/a/30019966/112680
您要做的v4.0.6
就是使用tags: true
参数。
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 II中使用下面的代码,使用的是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]'};
}
},
});