jQuery UI autocomplete

  1. Home
  2. jQuery UI
  3. Autocomplete
Bootstrap CardsButtons Extended

Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The datasource is a simple JavaScript array, provided to the widget using the source-option.

Examples

The Auto complete widgets provides suggestions while you type into the field. Here the suggestions are tags for people names, give "a" (for Aaron or Abel) a try.
The auto complete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented. Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
A categorized search result. Try typing "a" or "n".
A custom widget built by composition of Auto complete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections. The input is read from an existing select-element for progressive enhancement, passed to Auto complete with a customized source-option.

You can use your own custom data formats and displays by simply overriding the default focus and select actions. Try typing "j" to get a list of projects or just press the down arrow.

Examples

Usage: Type something, eg. "a" to see suggestions for tagging with people names. Select a value, then continue typing to add more. This is an example showing how to use the source-option along with some events to enable auto completing multiple values into a single field.
The Auto complete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. This is an example showing how to use the source-option along with some events to enable auto completing multiple values into a single field.
Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. This is an example showing how to use the source-option along with some events to enable auto completing multiple values into a single field.
Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. This is an example showing how to use the source-option along with some events to enable auto completing multiple values into a single field.