I am using Select2 (4.0) in an XPage. I have a ComboBox whose value is tied to a property in a bean, and the select items are populated (for now) by a viewScope variable I populate in before page load.
The user is able to type in a new value, but when I go to save the data I am getting a validation error:
This is not a validation error that I wrote but from Xpages. Although I am able to enter a new value ("Apple") when I save the page, it displays this error and removes my new value.
I believe this has something to do with the fact that the new value is not in the list of possible values, but I am not sure.
I found other posts that suggested that I have to add the new value to the list of values before submitting the page. I tried this but it didn't work either.
I really like select2 and want to use it for all comboBoxes and ListBoxes, but there are many times where the use needs to enter new values.
Code for the comboBox:
<xp:comboBox id="model"
value="#{javascript:PCModel.model}" xp:key="field">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:viewScope.models}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
And my script block:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(
function()
{
x$("#{id:model}").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;
}
}
)
}
)]]></xp:this.value>
</xp:scriptBlock>