Auto complete provides a "combo box" option - a text area that offers the user options as they type, like this one (try "lun").
Autosave is switched on by adding the class autocomplete to the field or to a containing element (if on a containing element, the first input field is autocompleted). It is then controlled by options encoded as a JSON string in the data-options attribute of the field.
Autocomplete works in two modes:
- Value list, in which the list of values to present to the user are passed in the options.
- Execute, in which the list of values to present to the user are retrieved by executing the current node.
Options
values |
Switches on value list mode. The list of values to use for the autcomplete. |
execute |
Switches on execute mode. If set to a truthy value and not exactly true, the value will be passed to the execute as the action parameter. The executed script should:
|
params |
Additional parameters to pass to the execute. For the execute method, this would often include the action parameter, and so the options would be something like this. { |
searchLength |
Number of characters to enter before the autocomplete values are offered to the user. Defaults to 3. |
Example
This example shows how to use execute mode.
On the input field, provide the class and data options. In this case, we want to execute the action "getValues".
<input class="autocomplete" data-options="{"execute":"getValues"}"/>
A simplistic executed script that returns from a list of values might look something like this.
var request = application.get('request'); var ALL_VALUES = [ 'Abalone','Beef','Chicken','Chips','Double cream', 'Durian','Egg','Eggplant','Fish','Fennel', 'Greek yoghurt','Halumi','Indian food','Jerky', 'Kangaroo','Loin of cod','Lunch','Luncheon meat','Meat', 'Meat paste','Nuts','Potatoes','Quail','Quorn','Rabbit', 'Roast beef','Sirloin','Tangerine', 'Ugli fruit','Vegetables','Venison','Whipped cream','Yoghurt','Zucchini' ]; function main(){ if ( request.getString('action') == 'getValues' ) { var value = request.getString('value').toLowerCase(); var values = ALL_VALUES.filter(v => v.toLowerCase().indexOf(value) != -1) application.put('return',application.stringify({values:values})); } } if (!application.errorFound()){ main(); }