Description
This widget enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Prerequisites
The widget comes preloaded with the required JavaScript libraries and css stylesheets.
JavaScript Libraries
jQuery version 3.2.1
jquery-ui.min.js version 1.12.1
CSS
jquery-ui.css version 1.12.1
The widget has been designed using the supplied bootstrap version 4 presentation template.
If this template is removed you must provide a link to jQuery 3.2.1 or later.
Installation
Drag the widget from the Widgets View onto the page. This will add the UI element of the widget to the page and also create the following directory structure in the Installed Widgets Project:
Installed Widgets
InstalledWidgets
AutoComplete_{version}
{formName}_{widgetPrefix}AutoComplete
Scripts
configure
Configuration
The configure server-side script in the Installed Widgets project contains the following functions:
config : configures the title, search case and minimum search length
getList: configures the values to be used in the search
selectedValue: receives the selected value
How it works
The widget uses the jQuery UI library.
The widget is activated using a jQuery ready event configured in the HTML Element Properties of the widgets panel.
All options that affect the way in which the auto complete widget behaves are configured in the config() function of the server-side configure script.
The values used in the search are sourced from the getList() function of the server-side configure script.
When the user selects a value from the list the selectedValue() function of the server-side configure script is called and the selected value is passed in.
Additional Notes
The config(),autocomplete() and selectedValue() functions run in the context of the widget.
To address elements in the form, all script references must be prefixed with "form." e.g.
function selectedValue(param)
{
form.fields.language.value = param;
}