Accessible Autocomplete Component Vanilla JavaScript

accessible-autocomplete is a JavaScript auto-completion built from the ground up to be available. An optimized, flexible, touch-enabled, advanced autocomplete library written in Vanilla JavaScript.

Design goals are:

  • Accessibility: Follow WAI-ARIA best practices and test with assistive technologies.
  • User Experience: Supporting a variety of user needs.
  • Compatibility: Work with as many browsers, devices, and assistive technologies as possible.

pure javascript autocomplete dropdown, fast autocomplete javascript, javascript autocomplete plugin, vanilla js autocomplete

How to make use of it:

1. Install and import the accessible-autocomplete as a module.

# NPM
$ npm i accessible-autocomplete
@import "accessible-autocomplete";
import accessibleAutocomplete from 'accessible-autocomplete'

2. Or load the wanted JavaScript and CSS files on the web page.

<link rel="stylesheet" href="dist/accessible-autocomplete.min.css" />
<script src="dist/accessible-autocomplete.min.js"></script>

3. Define your ideas in a JS array.

const list = [
      'Item 1',
      'Item 2',
      'Item 3',
      ...
]

4. Or insert them as choices in a select field:

<select id="list">
  <option value="">Select an item</option>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

5. Initialize the library and performed.

<label for="autocomplete-example">Select An Item</label>
<div id="autocomplete-example-container"></div>
// use JS array
accessibleAutocomplete({
  // container element
  element: document.querySelector('#autocomplete-example-container'),
  // input id
  id: 'autocomplete-example',
  // data source
  source: list
})

// use select box
accessibleAutocomplete.enhanceSelectElement({
  selectElement: document.querySelector('#list')
})

6. Available choices to customize the autocomplete library.

accessibleAutocomplete({
  // auto select
  autoselect: false,
  // namespace
  cssNamespace: 'autocomplete',
  // default value
  defaultValue: '',
  // 'inline' | 'overlay'
  displayMenu: 'inline',
  // min length to trigger the autocomplete
  minLength: 0,
  // default name
  name: 'input-autocomplete',
  // placeholder
  placeholder: '',
  onConfirm: () => {},
  // cofirm on input blur
  confirmOnBlur: true,
  // show the autocomplete list if no results
  showNoOptionsFound: true,
  // show all values
  showAllValues: false,
  // if the input field is REQUIRED
  required: false,
  // custom message
  tNoResults: () => 'No results found',
  tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
  // dropdown arrow
  dropdownArrow: DropdownArrowDown
})

Accessible Autocomplete For Vanilla JavaScript Plugin/Github, textarea autocomplete javascript, autocomplete no jquery


See Demo And Download

Official Website(alphagov): Click Here

This superior jQuery/javascript plugin is developed by alphagov. For extra Advanced Usage, please go to the official website.

Share