Autocomplete Control

Autocomplete

Click here to see Autocomplete Demo.

Autocomplete is the control which is more and more used into WEB Application, to help user to keyboard the good data. Most of the time, this control works with AJAX, but if you have not a laot of data, this is not necessary to call server each time. For instance, if you want add autocomplete capability, for mathematical functions, you can populate one time the autocomplete, and the searching is done on client side.

JSControlsTags provides this javascript Autocomplete control. It extends basic sriptaculous autocomplete, to :

  • generate automaticly HTML Div, which contains items after the user keyword a character.
  • add scrollbar capability into this HTML Div, when there is a lot of data.
  • add description after each keyword (items after the user keyword a character).
  • manage scrollbar when there are a lot of items found. You can use Page Up/Down, Start/End and Up/Down keyword to go at next/previous item.
  • add capability to bind a callback on event onItemSelected, which is throwed when an item is selected.

The list of items waiting by javascript autocomplete is a javascript array, which contains an object with keyword and description method. To construct this array, JSControlsTags use JSON notation, like this : 

 [
 {
  "keyword": ["cos()"],
  "description": ["Cosinus function"]
 },
 {
  "keyword": ["sin()"],
  "description": ["Sinus function"]
 }
]

jscontrols:autocomplete

  <input type="text" id="autoCompleteTextBox" style="width:500px">
  
<jscontrols:autocomplete 
        source="autoCompleteTextBox" 
        className="autocomplete"
        items="${requestScope.autoCompleteItems}"
        tokens="new Array('+','/','*','-')"        />

Here the full example with tld, javascript, css to include : 

<%@ taglib uri="/WEB-INF/jscontrolstags.tld" prefix="jscontrols" %>
<%
    java.util.List autoCompleteItems = new java.util.ArrayList();
    autoCompleteItems.add(new net.sourceforge.jscontrolstags.server.autocomplete.AutocompleteItem("cos()", "Cosinus function"));
    autoCompleteItems.add(new net.sourceforge.jscontrolstags.server.autocomplete.AutocompleteItem("sin()", "Sinus function"));
%>

  <!-- include javascript scriptaculous -->
  <script language="javascript" type="text/javascript" src="../js/scriptaculous/prototype-1.4.0.js"></script>
  <script language="javascript" type="text/javascript" src="../js/scriptaculous/effects.js"></script>
  <script language="javascript" type="text/javascript" src="../js/scriptaculous/controls.js"></script>
  <!-- include javascript jscontrolstags autocomplete -->

  <script language="javascript" type="text/javascript" src="../js/jscontrolstags-autocomplete.js"></script>
  <!-- include CSS jscontrolstags autocomplete -->
  <link rel="stylesheet" href="../css/jscontrolstags.css" type="text/css" />  

  <form>
    <fieldset>
      <legend>Mathematical formula</legend>
      <label for="formula">Formula : </label>
      <input type="text" id="autoCompleteTextBox" style="width:500px">
      <input type="submit" />
    </fieldset>
  </form>
  
<jscontrols:autocomplete 
        source="autoCompleteTextBox" 
        className="autocomplete"
        items="${requestScope.autoCompleteItems}"
        tokens="new Array('+','/','*','-')"        />
ParameterDescriptionRequired
varName of the JavaScript object created.no
sourceText field where label of autocomplete selection will be populated; also the field in which the user types out the search string.yes
itemsJavascript Array of item.yes
varItemsName of the Array JavaScript to use.no
onItemSelectedFunction to execute after a selection of an item found. Return false to stop the selection of the item. Parameter of this function is the Javascript object Item selected and the Autcomplete control.no
classNameCSS class name to apply to the popup autocomplete dropdown.yes
maxItemsMax items to displayed into the list. If number of items found is more greater than maxItems, scrollbar appears on left of the list.no
fullSearchSearch anywhere in autocomplete array strings.no
tokensToken to use, to lanch searching (eg : new Array('+','-')).no
frequencyFrequency to use search when user type a character.no
minCharsMinimum number of characters needed before autocomplete is executed.no