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>
