Autocomplete Extension

About the Autocomplete Extension

Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Autocomplete can be added on to almost any text input field. It should be used in a field where the same content is often entered. For example, in the keywords field on the initial care page you might enter in "cat caught" frequently. To simplify entering in this information you could designate keywords as an autocomplete field add give it the value "cat caught". You could also designate other keywords such as "dog caught, hit window, hit by car, poison, etc..." Then, the next time you start typing in the keywords field, a list of potential keywords matching your text will drop down.

Other common fields to use this extension for are the rescuer city or city found.

How to use the Autocomplete Extension

When the Autocomplete extension is activated it will appear on the far left sidebar. Select Autocomplete settings. To add a new autocomplete, first select the input field you want, then write in a comma separated list of values you want to be used for that autocomplete. If you want the user to be able to select more than one value, choose Yes for “Multiple values?” then hit “Update autocomplete settings” to save.

By default only one value can be used when typing in a field, however you can allow fields to use multiple values by select that setting in the autocomplete settings. An animal only is found in one city but could have hit a window and be cat caught.

This extension uses the jQueryUI Autocomplete Widget. Thorough documentation can be found at http://api.jqueryui.com/autocomplete

General Settings

To add a new autocomplete, first select the input field you want, then write in a comma separated list of values you want to be used for that autocomplete. If you want the user to be able to select more than one value, choose Yes for "Multiple values?" then hit "Update autocomplete settings" to save.

To delete an autocomplete, simple erase all the values for the autocomplete that you want to delete and hit "Update autocomplete settings" to save.

Callbacks

Callbacks are pre-wrapped by a function and passed the function arguments.

function(a, b, c) {
YOUR CODE GOES HERE
}

Remote Data Source provides the most flexibility and can be used to connect any data source to Autocomplete. If the data is from a remote source then the 'Multiple values?' option will be overridden to No. The callback gets two arguments:

• A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
• A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

1. request Type: Object
   • term Type: String

     The value currently in the text input.

2. response Type: Callback

On Select Callback: Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing. The callback gets two arguments:

1. event Type: Event
2. ui Type: Object
   • item Type: jQuery

     The selected item.