jQuery accessible autocomplete list
This jQuery plugin will transform and enhance a simple text input with a datalist into a wonderful and shiny input with autocomplete, and accessible.
The demo is here: https://a11y.nicolas-hoffmann.net/autocomplete-list/
How it works
- starts from a classical input completed by a datalist;
- then wraps the input into a container, adds status/help text zones and a “clear” button;
- then it listens when you type something in the field, and proposes you some suggestions.
Why it is cool
It is accessible: it works with VoiceOver, NVDA, Jaws, and it loves keyboard.
It is easy to customize there is a default configuration that can be changed/adapted, and you can override it using data-* attributes if you need it.
For the design, you can also customize the CSS to fullfil your needs.
How to use it
First, add a class js-combobox on an input with a working datalist:
Then download the plugin and use jQuery of course. This plugin is also available on NPMjs.com and can be installed using
npm i jquery-accessible-autocomplete-list-aria: https://www.npmjs.com/package/jquery-accessible-autocomplete-list-aria
You may also get it from Bower:
bower install jquery-accessible-autocomplete-list-aria.
You may use some options, so have a look at plugin options.
At the beginning of the plugin, a global configuration is available:
var $js_combobox =$body =default_text_help = 'Use tabulation (or down) key to access and browse suggestions after input. Confirm your choice with enter key, or esc key to close suggestions box.'default_class_for_invisible_text = 'invisible'suggestion_single = 'There is 'suggestion_plural = 'There are 'suggestion_word = 'suggestion'suggestion_word_plural = 'suggestions'button_clear_title = 'clear this field'button_clear_text = 'X'case_sensitive = 'yes'min_length = 0limit_number_suggestions = 666search_option = 'beginning' // or 'containing'see_more_text = 'See more results…'tablo_suggestions = ;
You may adapt texts to your need with it. However, if you need to customize one autocomplete field, you may use
data-* attributes to override global configuration. Here is the list:
data-combobox-prefix-class="foo": prefix all generated classes by
data-combobox-case-sensitive="yes/no": plugin is case-sensitive by default, which means “KROW” will be before “Kron”. If you set it up to
="no", the plugin will order all elements without caring of the case (see first example).
data-combobox-help-text: to override
default_text_helpin the config.
data-combobox-button-title: to override
button_clear_titlein the config, will be the title of the clear button.
data-suggestion-single: to override
suggestion_singlein the config, will be vocalized when there is 1 suggestion.
data-suggestion-plural: to override
suggestion_pluralin the config, will be vocalized when there are more several suggestions.
data-suggestion-word: to override
suggestion_wordin the config.
data-suggestion-word-plural: to override
suggestion_word_pluralin the config.
data-combobox-min-length="xx": to override
min_lengthin the config, a minimal length of text from which will be displayed suggestions.
data-combobox-limit-number-suggestions="3": to override
limit_number_suggestions, the maximum number of suggestions displayed.
data-combobox-search-option="beginning/containing": when plugin is searching a match with foo in the suggestions,
beginningvalue will search suggestions beginning with foo,
containingwill search suggestions containing foo.
data-combobox-see-more-text="<text>": if the number limit of suggestions is reached, the plugin will put this text as last suggestion.
data-combobox-notab-options="yes": if you don’t want to enable the tab key to go into/through suggestions.
Have a look at the second example of the demo if you want to see data attributes in action.
How to style it
In these examples, I’ve used
data-combobox-prefix-class="combobox", which means all classes will be prefixed by combobox-. Here are minimal styles needed:
Here is a full example really nicer and more pleasant to use:
With these styles, the focus/hover looks far better, and a border is added aroung suggestion list.
When focus is on the text input
- You may use tab to reach suggestions and continue through them (activated by default, can be removed using
- Esc will close suggestion list;
- You can also use Down to reach the suggestion list.
When focus is on the suggestions
- Tab/Shift+Tab allow to navigate through options (activated by default, can be removed using
- Enter or Space update the value of the input with the currently highlighted option, close the drop-down list and move the focus back to the input;
- Esc will close suggestion list, give focus back to the text input and remove suggestion in the input (go back to what was typed in);
- You can also use Down/Up arrows to navigate between suggestions.
No license problem, it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.
However, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)
It is lightweight: 19kb(development), 6.8kb (minified), only 2.1kb minified and gzipped.
The idea of this script is inspired by Heydon’s basic autocomplete with listbox demo. Aurélien Levy enhanced it with a working prototype, and I’ve finished the work (packaging, reutilisability, progressive enhancement, etc.) with Aurélien.