AutoComplete

The AutoComplete control is an autocompletion control in the sense of an alternative to a ListBox when the number of items grows too large. It is not supposed to be a suggestion box like Google's, it is supposed to propose items from a huge list according to the first characters typed by the user.

For example, if you want users to choose among the list of all french cities (36658 as of the 1st of january, 2015), you should use the AutoComplete control instead of the ListBox control. When the user types "Montro", the AutoComplete control will display a list with the following items: MONTROSIER, MONTROTY, MONTROTTIER, MONTROMANT, MONTRODAT, MONTROUGE

Thus, the AutoComplete control creates a hidden input which will receive a key, and a text input to display and type the text.

The hidden input only has a value if the user selects an item in the list, and this value is erased if the user types in the text input.

The items are retrieved by XMLHttpRequest in XML format.

You can specify other controls to complete automatically by using the acs:AutoFill element. For example, this can be used in a CRM application to retrieve all information about a contact with an autocomplete on his name.

Attributes and elements

The following sections describe attributes, child elements, and parent elements.

Attributes

Attribute	Description
label	Creates a label tag next to the input text tag.
labelposition	Where to place the label tag, "left" or "right"; default: left.
id	id attribute of the hidden input receiving the key. It determines the id attribute of several other tags: text input : {@id}-txt key and value clear button: {@id}-btn the div containing the items: autoComplete_{@id}-txt the items in the list: autocomplete_li_{@id}-txt_[position in the list]
name	the name of the hidden input receiving the key; if omitted, will default to the id attribute
initText	XPath attribute determining the text displayed at startup. Default: empty
initValue	XPath attribute determining the key value at startup. Default: empty
enabled	true to enable typing, false to disable. Default: true
maxlength	maximum length for the text input. Default: unlimited
items	XPath expression defining the list of items; this expression is executed on the XML document retrieved by XMLHttpRequest, starting at its root
valueNode	XPath expression defining the value of an item; this expression is executed in the context of an item's XML element
textNode	XPath expression defining the text of an item; this expression is executed in the context of an item's XML element
validation	wait or nowait; if the value is wait, the control waits after a keypress event to make the AJAX request
autoSelectIfOnlyOne	true or false; if true, if the AJAX request returns only one item, it is automatically selected
temporization	number of milliseconds to wait to make the AJAX request after a keypress event, if in wait mode; Default: 1000ms
characterThreshold	minimum number of characters that must be typed before making the AJAX request. Default: 2

Child elements

Element	Description
acs:URL	Description of the AJAX call to make to load the items
acs:AutoFill	When an item is selected, the system completes the input hidden and the input text; if you want to complete other controls, you can use the acs:AutoFill element

Parent elements

Element	Description
any xhtml or xsl tag

Styling information

The XHTML structure created by the acs:AutoComplete is the following:

Copy

<!-- if labelposition=left -->
<label for="{@id}-txt">label</label>
<input type="hidden" id="{@id}"/>
<input type="text" id="{@id}-txt"/>
<span id="{@id}-btn" class="button button-autocomplete">X</span>
<div id="autoComplete_{@id}-txt" class="divAutoComplete">
  <!-- Structure created after the AJAX request has returned -->
  <ul>
    <li id="autocomplete_li_enr27-txt_[position in the list, starting at 0]">
    </li>
  </ul>
</div>
<!-- if labelposition=right -->
<label for="{@id}-txt">label</label>

Examples

Copy

<acs:AutoComplete
  autoSelectIfOnlyOne="false"
  id="{$id}"
  initValue="{$initValue}"
  initText="{$initText}"
  items="BODY/VEHICLE"
  valueNode="ID"
  textNode="NAME">
  <acs:URL
    path="{$root}xslt.aspx"
    typerubrique="1"
    rubriqueid="20047"
    firstrec="1"
    nbrec="2"
    rec1="{$salesorg}"
    rec2="{$treeList}"
    rec3="{$availability}" />
</acs:AutoComplete>