The Autocompleter widget provides a special type of the text input field in which you can select from a list of matching items while typing.
The Autocompleter widget provides a special type of the text input field in which you can select from a list of matching items while typing.
The initial appearance of the widget is the same as a single-line text input field. As you type, a list of matching items is displayed and continually updated from the server.
The list of items matching the entered text appears with the input field. Each item in the list is focusable and is highlighted when in focus. Selecting an item from the list copies it into the text field, replacing the entered characters. However, you can still type further characters, and edit or delete the text in the input field.
The list is limited by the number of items that can be displayed in the available space, and may not be the full list of matching items. If no items match the string then no list will appear and the interaction will be identical to a regular text input field.
Autocompletion takes place when the widget:autocomplete element is enclosed by the xforms:input XForms element. The src attribute specifies the URL address of the autocompletion service responsible for returning a list of matching items.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>widget:autocomplete</title>
<xforms:model>
<xforms:instance>
<si:instance>
<si:item name="f1"/>
</si:instance>
</xforms:instance>
</xforms:model>
</head>
<body>
<xforms:group>
<xforms:input ref="f1">
<xforms:label>country</xforms:label>
<widget:autocomplete src="http://localhost:8080/mcs/projects/client-app/service/autocomplete"/>
</xforms:input>
</xforms:group>
</body>
</html>The autocompletion HTTP request uses the GET method. The request consists of the value specified by the widget:autocomplete element's src attribute, and the mcs-value query parameter that holds the entered value.
service/autocomplete?mcs-value=PAJAX requests executed by the Autocompleter widget are triggered by the user, and therefore are not affected by the Widget.setPollingEnabled() JavaScript method, which disables the automatic, interval-based polling.
With the input value 'P', the widget response containing a list of countries should look like the following example. See Widget response structure for more information.
<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
<response:head>
<response:link rel="mcs:theme" href="/main.mthm"/>
</response:head>
<response:body>
<response:autocomplete>
<li>Poland</li>
<li>Portugal</li>
</response:autocomplete>
</response:body>
</response:response>The mcs-delay property specifies the time between the last character typed and the AJAX request being to the server. The mcs-item-limit property defines the maximum number of matching items, which will be displayed in the list.
All style properties specified on the widget:autocomplete element apply to the box displaying the list of matching items.
The :active pseudo-class used with the li element specifies style properties which should be applied when a particular item is selected by the user.
Due to Nokia OSS browser limitations, the dropdown list opens on a onBlur event.
When the widget is not supported, the text input field will behave like a regular text input field without the autocompletion capabilities.