Auto complete

Auto complete provides a "combo box" option - a text area that offers the user options as they type, like this one (try "lun").

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

  • Take the text entered by the user in the "value" parameter.
  • Return in the <return> element an object with a values property which returns an array of values to offer to the user that match the input value parameter.
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.

{
  "execute": true,
  "params": {
    "action": "save"
  }
}
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="{&quot;execute&quot;:&quot;getValues&quot;}"/>

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();
}