[英]Display Select2 value not in list
尽管可以使用createSearchChoice将新值添加到Select2(3.5)元素中,但是如果列表中未包含新值,如何显示呢? 我可以添加不在Select2列表中的值,但是如何显示不在列表中的默认值?
$("#select").select2({
placeholder: "Who is the invoice from?",
minimumInputLength: 2,
quietMillis: 300,
allowClear : true,
ajax: {
url: "accountsDataStore.xsp",
dataType: 'json',
data: function (term, page) {
return {
q: term, // search term
page_limit: 10
};
},
results: function (data, page) { return data; }
},
// extra code to allow entering value not in list
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};
}
},
initSelection: function(element, callback) {
//sets a default value (if a value was selected previously)
//get the existing value
var id = $(element).val();
//if a value was selected: perform an Ajax call to retrieve the text label
if (id !== "") {
$.ajax(
"accountsDataStore.xsp", {
data: { id: id },
dataType: "json"
}).done(function(data) {
// ** TODO if value not found, display current element value -- HOW?? **
callback(data); });
}
}
}).on('change', function (evt) {
// Do something after value changes
}
);
在initSelection
期间,如果找不到默认值,那么如何显示当前值?
<input type="hidden"
id="view:_id1:_id4:callback1:inputName"
name="view:_id1:_id4:callback1:inputName"
aria-required="true"
value="ACME Company"
tabindex="-1"
class="select2-offscreen">
在表单中,该值已设置,只是不显示在显示所选值的<span>
中。 我们是否只是以某种方式将其添加到列表中?
谢谢。
我个人通过适当使用视图控制器(viewScoped bean)来处理允许值不在列表中的select2元素。
使用以下代码,我可以做三件事:
<xp:comboBox id="comboDemo" value="#{ctrl.comboValue}" validator="#{ctrl.validateCombo}">
<xp:selectItems value="#{ctrl.comboChoices}" />
</xp:comboBox>
除非默认值为null
,否则将考虑当前绑定值来构建默认选项。
public List<SelectItem> getComboChoices() {
if (comboChoices == null) {
comboChoices = new ArrayList<SelectItem>();
// Complete with your own logic here
if (StringUtil.isNotEmpty(comboValue)) {
comboChoices.add(new SelectItem(comboValue, comboValue));
}
}
return comboChoices;
}
一旦选择了新值,我需要确保它将以返回服务器的方式被接受。 我利用验证阶段潜入新的价值。
public void validateCombo(FacesContext facesContext, UIComponent component, Object value) {
boolean isNewValue = true;
for (SelectItem item : comboChoices) {
if (value.equals(item.getValue())) {
isNewValue = false;
break;
}
}
if (isNewValue) {
String newValue = (String) value;
comboChoices.add(new SelectItem(newValue, newValue));
}
}
以上是我所做工作的简明版本。 您可以使它更聪明,但我希望示例足够清楚。
动态选项创建
除了预填充的选项菜单外,Select2还可以根据用户在搜索框中输入的文本动态创建新选项。 此功能称为“标记”。 要启用标记,请将标记选项设置为true:
在这里查看详细信息
在select2中,您打算做的事情称为标记,这就是它的进行方式;
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
//the major ish
$(".js-example-tags").select2({
tags: true
});
用简单的英语只需在select2初始化期间设置标签,您就可以选择添加一个不在下拉列表中的值。
希望这对您有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.