Accessible Autocomplete Plugin With jQuery And Datalist

This is a lightweight, accessible, customizable, keyboard-enhanced, progressive enhancement autocomplete input plugin built using jQuery, Datalist, and ARIA attributes.

How to use it:

1. Load the JavaScript file jquery-accessible-autocomplete-list-aria.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery-accessible-autocomplete-list-aria.js"></script>

2. Add the CSS class 'js-combobox' to an input field where you want to apply the autocomplete functionality to.

<input type="text" name="demo" id="demo" class="js-combobox" list="demo">

3. Specify a list of pre-defined options/suggestions for the autocomplete input.

<datalist id="demo">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

4. That's it. To config the autocomplete list, just override the plugin settings as shown below:

// default message text
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.',
suggestion_single = 'There is ',
suggestion_plural = 'There are ',
suggestion_word = 'suggestion',
button_clear_title = 'clear this field',
button_clear_text = 'X',
case_sensitive = 'yes',
see_more_text = 'See more results…',

// default CSS class for invisible text
default_class_for_invisible_text = 'invisible',

// min length to trigger the autocomplete list
min_length = 0,

// max number of suggestions to show
limit_number_suggestions = 666,

// or 'containing'
search_option = 'beginning'

5. You can also pass the options to each autocomplete input individually via HTML data attributes as these:

<input type="text" name="demo" id="demo" class="js-combobox" list="demo"
       data-combobox-prefix-class="foo"
       data-combobox-case-sensitive="yes/no"
       data-combobox-help-text:"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." 
       data-combobox-button-title:"Button" 
       data-suggestion-single:"There is " 
       data-suggestion-plural:"There are " 
       data-suggestion-word:"suggestion" 
       data-combobox-min-length="2": 
       data-combobox-limit-number-suggestions="666"
       data-combobox-search-option="beginning/containing"
       data-combobox-see-more-text="<text>"
       data-combobox-notab-options="yes"
>

Changelog:

2018-06-04

• Bugfix

---

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.