Tuesday, 2 December 2014

Select2 Auto Tokenization

In this blog post I describe the basic use of the Tokenization function which can easily be added to a Select2 field.
Select2 supports the ability to add choices automatically as the user is typing into a (search) field. This is particularly useful when the user should be able to quickly enter a number of tags by separating them with a comma or a space.
The tokenizer function can process the input typed into a (search) field after every keystroke and extract and select choices.
Tokenizer only applies to multi-selects.
The separators are defined in the tokenSeparators option, an array of strings that define token separators for the default tokenizer function. By default, this option is set to an empty array which means tokenization using the default tokenizer is disabled. It is recommended to set this option to a value similar to [',', ' '].
In the example below the built in tokenizer function is used in combination with a Multiline Edit Box (inputTextarea).

The function has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:inputTextarea1}" ).select2({
      tags:["red", "green", "blue"],
      tokenSeparators: [",", " "]        
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>

Result

Predefined Tags


Own input from the user in conjunction with entering a comma or space (tokenSeparators) to exit the input and add the tag(s) into the field.



Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script
src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
</xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:comboBox1}" ).select2({
      placeholder: "Select a category",
      allowClear: true,
      minimumInputLength : 2
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:listBox1}" ).select2({
      placeholder: "Select a software category",
      minimumInputLength : 2,
      maximumSelectionSize : 3      
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:inputTextarea1}" ).select2({
      tags:["red", "green", "blue"],
      tokenSeparators: [",", " "]        
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");    
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@Text("");
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Tags Field
<xp:inputTextarea id="inputTextarea1"
value="#{document1.Tags}">
</xp:inputTextarea>
</div>
</div>
</xp:panel>
</xp:view>

No comments:

Post a Comment