虽然可以使用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>
中。我们只是以某种方式将它添加到列表中吗?
感谢。
答案 0 :(得分:0)
我亲自处理select2元素,通过正确使用视图控制器(viewScoped bean),允许值不在列表中,如下所示。
使用以下代码我做了3件事:
<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));
}
}
以上是我所做的一个愚蠢的版本。你可以把它变得更聪明,但我希望这个例子足够清楚。
答案 1 :(得分:0)
动态选项创建
除了预填充的选项菜单外,Select2还可以动态 根据用户在搜索框中输入的文本来创建新选项。这个 功能称为“标记”。要启用标记,请将标记选项设置为 正确:
在here中查找详细信息
在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初始化期间设置标签,然后您就可以选择添加一个不在下拉列表中的值。
希望这很有帮助