Tuesday, 25 November 2014

Select2 minimumInputLength

In this blog post I describe the basic use of the property minimumInputLength which can easily be added to a Select2 field.
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful.
With this property the number of characters necessary to start a search can be indicated.
The property minimumInputLength can not be added as an attribute to a Combo Box / List Box.

<xp:this.attrs>
<xp:attr name="minimumInputLength" value="2"></xp:attr>
</xp:this.attrs>

The property minimumInputLength is also NOT available in the Select2 Picker for Combo / List Box from the OpenNTF Bootstrap4XPages plugin.


So the property minimumInputLength has to be added as an Select2 option.

<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>

Result



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
      });
               }
           );
  ]]></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>
</xp:panel>
</xp:view>

No comments:

Post a Comment