Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

accessible-autocomplete

alphagov235.8kMIT3.0.1

An autocomplete component, built to be accessible.

a11y, accessibility, autocomplete, component, plugin, typeahead, widget

readme

Accessible autocomplete

The accessible autocomplete is a component that helps users choose answers from a list you provide. You can also use it to make the answers you get from users more consistent.

If you're asking users to provide their country or territory, the govuk-country-and-territory-autocomplete might be more appropriate.

npm version JavaScript Style Guide gzip size

Sauce Labs Build Status

accessible-autocomplete is a JavaScript autocomplete built from the ground up to be accessible. The design goals are:

  • Accessibility: Following WAI-ARIA best practices and testing with assistive technologies.
  • User experience: Supporting a wide variety of user needs.
  • Compatibility: Working with recommended browsers and assistive technologies.

Try out the examples!


Support

The GOV.UK Design System team maintains the accessible autocomplete as a standalone component. However, we’re only able to put in minimal work to support it.

Read about our plans to maintain this component.

Read more about the types of support we can provide.


Installation / usage

Using npm and a module system

Install it by running:

npm install --save accessible-autocomplete

The accessibleAutocomplete function will render an autocomplete <input> and its accompanying suggestions and aria-live region. Your page should provide a <label> and a container element:

<label for="my-autocomplete">Select your country</label>
<div id="my-autocomplete-container"></div>

Then import it using a module system like Browserify / Webpack / Rollup, and call the accessibleAutocomplete function, providing an array of values:

import accessibleAutocomplete from 'accessible-autocomplete'

const countries = [
  'France',
  'Germany',
  'United Kingdom'
]

accessibleAutocomplete({
  element: document.querySelector('#my-autocomplete-container'),
  id: 'my-autocomplete', // To match it to the existing <label>.
  source: countries
})

If you want to use it as a replacement for a <select> element, read the Progressive enhancement section.

As a plain JavaScript module

You can copy the dist/accessible-autocomplete.min.js file to your JavaScript folder and import it into the browser:

<script type="text/javascript" src="assets/js/accessible-autocomplete.min.js"></script>

Styling the autocomplete

A stylesheet is included with the package at dist/accessible-autocomplete.min.css.

You can copy it to your stylesheets folder and import it into the browser:

<link rel="stylesheet" href="assets/css/accessible-autocomplete.min.css" />

You can also import it using Sass:

@import "accessible-autocomplete";

[!NOTE]

When styling the .autocomplete__input element, be aware that the autoselect option will render a second .autocomplete__hint input element for suggestion text. Both elements should be styled to ensure suggestions exactly align with the typed input text.

Using with Preact

If you already use Preact in your application, you can import a bundle that will use that:

import preact from 'preact'
import Autocomplete from 'accessible-autocomplete/preact'

preact.render(
  <Autocomplete id='autocomplete' source={suggest} />,
  document.querySelector('#container')
)

Try out the Preact example!

Preact versions

Preact v8.5.3 has been tested to work with the Accessible Autocomplete - although make sure to check out documented issues.

Preact 10.19.6 has been incompletely tested with the Accessible Autocomplete. No issues were found in Chrome and Firefox, but our automated tests for picking an option using the keyboard failed in Internet Explorer 11 (an issue we could not replicate when testing manually, though).

We recommend you carry out thorough testing if you wish to use this or later versions of Preact.

Using with React

If you already use React in your application, you can import a bundle that will use that:

import React from 'react'
import ReactDOM from 'react-dom'
import Autocomplete from 'accessible-autocomplete/react'

ReactDOM.render(
  <Autocomplete id='autocomplete' source={suggest} />,
  document.querySelector('#container')
)

Try out the React example!

React versions

React v15.5.4 has been tested to work with the Accessible Autocomplete - although make sure to check out documented issues.

React v15.6.2, v16.14.0, v17.0.2, and v18.2.0 have been incompletely tested with the Accessible Autocomplete. No undocumented issues were found (though be aware that React 18 dropped support for Internet Explorer)

We recommend you carry out thorough testing if you wish to use this or later versions of React.

API documentation

Required options

element

Type: HTMLElement

The container element in which the autocomplete will be rendered in.

id

Type: string

The id to assign to the autocomplete input field, to use with a <label for=id>. Not required if using enhanceSelectElement.

source

Type: Array | Function

An array of values to search when the user types in the input field, or a function to take what the user types and call a callback function with the results to be displayed.

An example of an array of values:

const countries = [
  'France',
  'Germany',
  'United Kingdom'
]

If source is a function, the arguments are: query: string, populateResults: Function

Similar to the source argument for typeahead.js, a backing data source for suggestions. query is what gets typed into the input field, which will callback to populateResults synchronously with the array of string results to display in the menu.

An example of a simple suggestion engine:

function suggest (query, populateResults) {
  const results = [
    'France',
    'Germany',
    'United Kingdom'
  ]
  const filteredResults = results.filter(result => result.indexOf(query) !== -1)
  populateResults(filteredResults)
}

Other options

inputClasses (default: null)

Type: string | null

Adds custom html classes to the generated input element.

If autoselect is set to true, the option hintClasses can be configured separately or it will default to the inputClasses value.

hintClasses (default: null)

Type: string | null

Adds custom html classes to the additional input element that appears when what the user typed matches the start of a suggestion.

If autoselect is set to true, the option inputClasses will be used as the default value unless hintClasses is set to an empty string ''.

Type: Object

Sets html attributes and their values on the generated ul menu element. Useful for adding aria-labelledby and setting to the value of the id attribute on your existing label, to provide context to an assistive technology user.

[!NOTE]

To maintain assistive technology support, menu attributes id, role and onMouseLeave cannot be overridden using menuAttributes. Setting className will append to the component default and menuClasses values.

Type: string | null

Adds custom html classes to the generated ul menu element.

autoselect (default: false)

Type: Boolean

Set to true to highlight the first option when the user types in something and receives results. Pressing enter will select it.

confirmOnBlur (default: true)

Type: Boolean

The autocomplete will confirm the currently selected option when the user clicks outside of the component. Set to false to disable.

cssNamespace (default: 'autocomplete')

Type: string

Use this property to override the BEM block name that the JavaScript component will use. You will need to rewrite the CSS class names to use your specified block name.

defaultValue (default: '')

Type: string

Specify a string to prefill the autocomplete with.

displayMenu (default: 'inline')

Type: 'inline' | 'overlay'

You can set this property to specify the way the menu should appear, whether inline or as an overlay.

minLength (default: 0)

Type: number

The minimum number of characters that should be entered before the autocomplete will attempt to suggest options. When the query length is under this, the aria status region will also provide helpful text to the user informing them they should type in more.

name (default: 'input-autocomplete')

Type: string

The name for the autocomplete input field, to use with a parent <form>.

onConfirm (default: () => {})

Type: Function

Arguments: confirmed: Object

This function will be called when the user confirms an option, with the option they've confirmed.

Type: string

This option will populate the placeholder attribute on the input element.

We think placeholders have usability issues and that there are better alternatives to input placeholder text, so we do not recommend using this option.

required (default: false)

Type: Boolean

The input field will be rendered with a required attribute, see W3C required attribute definition.

showAllValues (default: false)

Type: Boolean

If this is set to true, all values are shown when the user clicks the input. This is similar to a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey this behaviour.

showNoOptionsFound (default: true)

Type: Boolean

The autocomplete will display a "No results found" template when there are no results. Set to false to disable.

templates (default: undefined)

Type:

{
  inputValue: Function,
  suggestion: Function
}

This object defines templates (functions) that are used for displaying parts of the autocomplete.

inputValue is a function that receives one argument, the currently selected suggestion. It returns the string value to be inserted into the input.

suggestion is a function that receives one argument, a suggestion to be displayed. It is used when rendering suggestions, and should return a string, which can contain HTML.

:warning: Caution: because this function allows you to output arbitrary HTML, you should make sure it's trusted, and accessible.

If your template includes child elements with defined foreground or background colours, check they display correctly in forced colors modes. For example, Windows high contrast mode.

Type: Function

A function that gets passed an object with the property className ({ className: '' }) and should return a string of HTML or a (P)React element. :warning: Caution: because this function allows you to output arbitrary HTML, you should make sure it's trusted, and accessible.

Internationalization

tNoResults (default: () => 'No results found')

Type: Function

A function that receives no arguments and returns the text used in the dropdown to indicate that there are no results.

tStatusQueryTooShort (default: (minQueryLength) => `Type in ${minQueryLength} or more characters for results`)

Type: Function

A function that receives one argument that indicates the minimal amount of characters needed for the dropdown to trigger and returns the text used in the accessibility hint to indicate that the query is too short.

tStatusNoResults (default: () => 'No search results')

Type: Function

A function that receives no arguments and returns the text that is used in the accessibility hint to indicate that there are no results.

tStatusSelectedOption (default: (selectedOption, length, index) => `${selectedOption} ${index + 1} of ${length} is highlighted`)

Type: Function

A function that receives three arguments - the selectedOption, the count of available options, and the (zero-based) index of the selected option - and returns the text used in the accessibility hint to indicate which option is selected.

tStatusResults

Default:

(length, contentSelectedOption) => {
  const words = {
    result: (length === 1) ? 'result' : 'results',
    is: (length === 1) ? 'is' : 'are'
  }

  return <span>{length} {words.result} {words.is} available. {contentSelectedOption}</span>
}

Type: Function

A function that receives two arguments - the count of available options and the return value of tStatusSelectedOption - and returns the text used in the accessibility hint to indicate which options are available and which is selected.

tAssistiveHint (default: () => '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.')

Type: Function

A function that receives no arguments and returns the text to be assigned as the aria description of the html input element, via the aria-describedby attribute. This text is intended as an initial instruction to the assistive tech user. The aria-describedby attribute is automatically removed once user input is detected, in order to reduce screen reader verbosity.

Progressive enhancement

If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a <select> menu on the server, and use progressive enhancement.

If you have the following HTML:

<select id="location-picker">
  <option value="fr">France</option>
  <option value="de">Germany</option>
  <option value="gb">United Kingdom</option>
</select>

You can use the accessibleAutocomplete.enhanceSelectElement function to enhance it into an autocomplete:

accessibleAutocomplete.enhanceSelectElement({
  selectElement: document.querySelector('#location-picker')
})

This will:

  • Place an autocomplete input field after the specified <select>
  • Default the autocomplete autoselect to true
  • Default the autocomplete defaultValue to the select's option[selected]
  • Default the autocomplete id to the <select>'s id
  • Default the autocomplete name attribute to '' to prevent it being included in form submissions
  • Default the autocomplete source to use existing <option>s from the <select>
  • Hide the <select> using inline display: none
  • Set the <select>'s id to ${id}-select to decouple from any <label>
  • Upon confirming a value in the autocomplete, update the original <select>

This function takes the same options as accessibleAutocomplete, with the only difference being that it uses selectElement instead of element, which needs to be an instance of HTMLSelectElement.

Note: The accessibleAutocomplete.enhanceSelectElement function is fairly light and wraps the public API for accessibleAutocomplete. If your use case doesn't fit the above defaults, try reading the source and seeing if you can write your own.

Null options

If your <select> element has a "null" option - a default option with no value - then you can pass a defaultValue option to enhanceSelectElement which will replace the label of this option when it is selected.

With the following HTML:

<select id="location-picker">
  <option value="">Select a country</option>
  <option value="fr">France</option>
  <option value="de">Germany</option>
  <option value="gb">United Kingdom</option>
</select>

Then passing a defaultValue option of '' will then leave the autocomplete blank if the null option is selected.

accessibleAutocomplete.enhanceSelectElement({
  defaultValue: '',
  selectElement: document.querySelector('#location-picker')
})

Any null options will also be filtered out of the options used to populate the source of the autocomplete element. To preserve options with no value in the autocomplete, then pass a preserveNullOptions flag of true to enhanceSelectElement.

Analytics and tracking

The following events get triggered on the input element during the life cycle of the autocomplete:

  • onConfirm - This function will be called when the user confirms an option, with the option they've chosen.

Example usage:

accessibleAutocomplete({
  // additional options
  onConfirm: (val) => {
    track(val)
  }
})

Why another autocomplete?

accessible-autocomplete was built after studying many existing solutions and prototyping patches to fix user experience or accessibility issues. It draws heavy inspiration from the following (and a lot of others):

Developing locally

Check out the CONTRIBUTING guide for instructions.

If you want to help and want to get more familiar with the codebase, try starting with the "good for beginners" issues.

License

MIT.

changelog

CHANGELOG

Unreleased

3.0.1 - 2024-09-12

Fixes

3.0.0 - 2024-04-19

Breaking changes

Verify your code does not rely on removed polyfills

Following on from our previous announcement, the accessible autocomplete code is no longer transpiled and polyfilled to support IE8-10.

However, because the polyfills create or extend global objects, you might have other code in your service unintentionally relying on the inclusion of these polyfills. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.

This change was introduced in pull request #612: Update packages, configs + Node.js 20.

Check for minor visual changes in the rendering of the component

We've made some style adjustments to the stylesheet shipped with the component to make its colours, height, line-height and padding match those of the latest version of GOV.UK Frontend's <input>.

If you're using this stylesheet:

  • check if our style update affects the rendering of the component in your service, and adjust if necessary
  • if you were adding to the default style's to match GOV.UK Frontend's input, look for CSS declarations you may now be able to remove

This change was introduced in pull request #644: Align CSS styles with GOV.UK Frontend.

New features

Options to add classes to parts of the component

Use these new options to add your own classes to parts of the component:

  • inputClasses for the input element
  • hintClasses for the suggestion hint (input element appearing when the text typed by the user matches the start of an option)
  • menuClasses for the ul element listing the options

You can also add custom classes to the ul listing the options through the new menuAttributes option, providing a className or class property.

This change was introduced in:

New class on the component's status

Use the new autocomplete__status class in your CSS (or <CSS_NAMESPACE>__status if you set the cssNamespace option) to customise the styles of the component's status element (hidden element that makes announcements to assistive technologies).

This change was introduced in pull request #620: Add className attribute to status component. Thanks to @lennym for contributing this change.

Fixes

2.0.4 - 2022-02-07

Fixes

2.0.3 - 2020-07-01

Fixes

2.0.2 - 2020-01-30

Fixes

2.0.1 - 2019-10-07

Fixes

2.0.0 - 2019-09-26

We recommend you update to the latest release using npm:

npm install accessible-autocomplete@latest

Breaking changes

You must make the following change when you migrate to this release, or your service may break.

Migrate to the new accessible focus state

The focus state now meets the new WCAG 2.1 level AA requirements.

You do not need to do anything if you’re using Sass.

If you’ve previously copied CSS from our code into your project, you must copy all the CSS from our accessible-autocomplete.min.css file into your CSS file.

If you’ve created custom CSS, you should check that your component meets WCAG 2.1 level AA requirements. You can read how we made the GOV.UK Design System focus states accessible.

Pull request #360: Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements.

Fixes

Better compatibility with screen readers

The input field is now visible to all screen readers, because the input field now meets the Accessible Rich Internet Applications (ARIA) 1.0 standard instead of ARIA 1.1. ARIA 1.0 is better supported by the current versions of most screen readers.

Screen readers will now consistently tell users:

  • when users have entered too few characters in the input field
  • the correct number of search results, and what the results are
  • which result users have highlighted
  • how to use autocomplete in different screen readers - by reading hidden hint text

Screen readers will also now avoid telling users information they do not need to know after they highlight an option.

Thanks to Mark Hunter, Chris Moore and everyone at HMRC who worked on these improvements.

Pull request #355: Refinements to address accessibility issues

1.6.2 - 2018-11-13

  • Update all packages and add @babel/preset-env for browser polyfills. Updates Preact and avoids React 16 onFocusOut warnings - thanks @colinrotherham (#316)

  • Fix mouse event issues in IE9-11 including looping mouseout and click event being prevented on child elements (e.g. bold text) - thanks @colinrotherham (#310)

  • Fix position being incorrectly reported as '1 of n' regardless of actual position in list – thanks @PRGfx (#291)

  • Fix spacebar input not being registered when seeing 'No results found' message – thanks @AdenFraser (#287)

  • Update following dependencies (from "Current" to "Wanted"). This fixes failing WebdriverIO tests and updates JS Standard to use eslint 4.

Package Current Wanted Latest
babel-eslint 8.0.0 8.2.6 8.2.6
babel-loader 7.1.0 7.1.5 7.1.5
babel-plugin-transform-decorators-legacy 1.3.4 1.3.5 1.3.5
babel-register 6.24.1 6.26.0 6.26.0
babel-runtime 6.23.0 6.26.0 6.26.0
chai 4.0.2 4.1.2 4.1.2
chalk 2.0.1 2.4.1 2.4.1
copy-webpack-plugin 4.0.1 4.5.2 4.5.2
coveralls 2.13.1 2.13.3 3.0.2
cross-env 5.0.1 5.2.0 5.2.0
csso-cli 1.0.0 1.1.0 1.1.0
husky 0.14.1 0.14.3 0.14.3
karma 1.7.0 1.7.1 2.0.4
karma-coverage 1.1.1 1.1.2 1.1.2
karma-mocha-reporter 2.2.3 2.2.5 2.2.5
karma-webpack 2.0.3 2.0.13 3.0.0
mocha 3.4.2 3.5.3 5.2.0
npm-run-all 4.0.2 4.1.3 4.1.3
phantomjs-prebuilt 2.1.14 2.1.16 2.1.16
preact 8.1.0 8.2.9 8.2.9
sinon-chai 2.11.0 2.14.0 3.2.0
source-map-loader 0.2.1 0.2.3 0.2.3
standard 10.0.2 11.0.1 11.0.1
wdio-mocha-framework 0.5.10 0.5.13 0.6.2
wdio-sauce-service 0.4.0 0.4.10 0.4.10
wdio-selenium-standalone-service 0.0.8 0.0.10 0.0.10
wdio-spec-reporter 0.1.0 0.1.5 0.1.5
webdriverio 4.8.0 4.13.1 4.13.1
webpack 3.0.0 3.12.0 4.16.1
webpack-dev-server 2.5.0 2.11.2 3.1.4
webpack-sources 1.0.1 1.1.0 1.1.0

1.6.1 - 2017-09-25

  • Fix role attr by moving role='combobox' to wrapper and adding role='textbox' to the input. By @tobias-g
  • Fix examples page by removing unrequired npm package v8-lazy-parse-webpack-plugin
  • Fix scrolling on iOS by reverting #85, new issue raised to find better fix for clicking custom suggestions #177
  • Fix selection and timeout race condition. By @tobias-g
  • Fix dropdown on IE to ensure it isn't focusable. By @tobias-g

1.6.0 - 2017-07-20

  • [Feature] Allow customization of the dropdown arrow. By @sventschui.

1.5.0 - 2017-07-18

  • [Feature] Add ability to translate texts. Relates to #96. By @sventschui.

1.4.2 - 2017-07-18

  • Allow space to confirm an option, fixes #98.
  • Add support for navigating lists on IE9, 10 and 11, fixes #193.

1.4.1 - 2017-07-06

  • Fix use of HTML entities in enhanced select options. #151. By @dracos.

1.4.0 - 2017-07-04

  • [Feature] Add option to show all values on dropdown. By @joelanman.

1.3.2 - 2017-07-03

  • Redirect keypresses on an option to input, fixes #179.

1.3.1 - 2017-06-08

  • Fix autoselect: false not working when using enhanceSelectElement.

1.3.0 - 2017-06-02

  • [Feature] Add support for passing an array of strings to source. By @joelanman.

1.2.1 - 2017-05-24

  • Fix progressive enhancement in FireFox < 48. By @revilossor.

1.2.0 - 2017-05-23

  • [Feature] Export Preact and React bundles.

1.1.0 - 2017-05-18

  • [Feature] Add required option. By @samtsai.

1.0.6 - 2017-05-17

  • Update preact dependency to v8.1.0.

1.0.5 - 2017-05-16

  • Add support for handling null/placeholder options when using enhanceSelectElement. Use preserveNullOptions: true to include options with value='' in the autocomplete results when enhancing a select element. By @lennym.

1.0.4 - 2017-05-15 (deprecated)

  • This release does not contain any changes compared to the previous one and is due to a mistake in our build scripts.

1.0.3 - 2017-05-15

  • Do not copy name attribute when using enhanceSelectElement. By @lennym.

1.0.2 - 2017-05-12

  • Add support for an empty defaultValue when enhancing a select element. By @lennym.

1.0.1 - 2017-05-12

  • Update style property in package.json to reflect updated filename. By @lennym.

1.0.0 - 2017-05-10

  • [Breaking] Default autoselect to true when using enhanceSelectElement.
  • [Breaking] Make id a required attribute.
  • [Breaking] Rename onSelect to onConfirm.
  • [Breaking] Rename selectOnBlur to confirmOnBlur.
  • Fix an issue where users couldn't click on custom suggestions on Chrome.

0.6.0 - 2017-05-10

  • [Breaking] Rename component from accessible-typeahead to accessible-autocomplete.
  • Default defaultValue when progressively enhancing.
  • Throw an error when enhanceSelectElement is called without a selectElement.
  • Throw errors when accessibleAutocomplete is called without element or source.

0.5.0 - 2017-05-09

  • Test the typeahead with end to end tests.
  • Don't display hints on browsers that don't support pointer-events.
  • [Breaking] Rename dist/styled.min.css to dist/accessible-typeahead.min.css.
  • [Breaking] Rename library main export from AccessibleTypeahead to accessibleTypeahead.
  • Fix aria status region to more reliably trigger when the number of results stay the same.
  • Fix hint rendering and being picked up by assistive technologies.
  • More aria status region above input so it's more easily picked while navigating.

0.4.2 - 2017-05-03

  • Add touchEnd handler for iOS and touch devices, fixes custom suggestions.
  • Add style declaration in package.json
  • Add support for UMD/commonjs module definition.

0.4.1 - 2017-04-26

  • Minify styled.css for production.

0.4.0 - 2017-04-11

  • [Breaking] Don't focus suggestions when hovering them, add :hover CSS class.
  • Add showNoOptionsFound property to allow users to disable this behaviour.
  • Pass through unrecognised key events to input, allowing users to continue typing when they are focusing an option.

0.3.5 - 2017-04-06

  • Don't prepopulate defaultValue in enhanceSelectElement.

0.3.4 - 2017-04-06

  • Pass actual selected object into onSelect.
  • Add selectOnBlur property to allow users to disable this behaviour.
  • Add placeholder property.

0.3.3 - 2017-04-04

  • Add templates.inputValue and templates.suggestion properties. These allow users to override how the suggestions are displayed.

0.3.2 - 2017-04-03

  • Add AccessibleTypeahead.enhanceSelectElement function.
  • Add onSelect property.

0.3.1 - 2017-03-09

  • Add ability to specify a defaultValue to prefill the input.
  • When user has selected an option with the keyboard, blurring will select.
  • When user has no selected but autoselect is on, blurring will select.
  • Hovering no longer selects, just focuses.
  • When hovering out of component, focus returns to selected.
  • Allow enter to submit forms when menu isn't opened.
  • Hide results when going under minLength.

0.3.0 - 2017-03-09

  • [Breaking] Add displayMenu property. The default is inline which was not the previous default.
  • CSS colour changes, and more properties moved away from inline styles.
  • Turn off native browser autocomplete so it doesn't interfere with typeahead overlay.
  • Change the content and styling of the 'No results found' feature.

0.2.4 - 2017-03-02

  • Display "No options found" when there are no results.
  • Add autoselect property. This refactors the :focused CSS class to --focused, but because previous styling should still work as before, is not a breaking change.
  • Poll the input element periodically to pick up value changes. This makes it more resilient to direct modifications from applications like Dragon, or from interventions from other JavaScript snippets.

0.2.3 - 2017-02-21

  • Add minLength property, which:
    • Tells the aria region to display text that the user should type in more characters;
    • Doesn't call the source until that lower limit is reached.
  • Select text only when component is unfocused.

0.2.2 - 2017-02-16

  • Fix focus/blur events on IE11.
  • Fix value of aria-expanded attribute to be based on menuOpen.
  • Remove aria-activedescendant attribute when no option selected.
  • Set aria-selected on options when they are focused.
  • Fix clicking on options on Safari.
  • Use a darker blue in the styled example for better contrast ratios.
  • Don't close menu when blurring options or input on iOS, to allow VoiceOver users the ability to select from the available options.
  • Autoselect entire text region when focusing into the input.

0.2.1 - 2017-02-03

  • Don't close menu when closing the keyboard on iOS, to allow VoiceOver users the ability to select from the available options.
  • Add ability to set name attribute on input.

0.2.0 - 2017-01-31

  • [Breaking] Change the CSS classes to our own instead of the jQuery typeahead ones.
  • Allow importing styling from file in examples/styled.css.
  • Tweak the styled example to fix two Safari bugs:
    • fix scroll bar appearing in menu where none is necessary;
    • fix weird margin separating the input from the menu.

0.1.3 - 2017-01-31

  • Don't apply focused CSS on hover, change handler to MouseOver instead of MouseMove.
  • (WIP) Make enter select first option if autoselect is enabled. This feature is not finished yet.
  • Close results when focusing out of component after hovering an element.
  • Update styled example:
    • unbold results;
    • make height of options consistent with input;
    • remove top border from results menu;
    • remove default focus outline on options.
  • Don't display the menu when there are no options.
  • Prevent accidental form submission by preventDefaulting on enter key.
  • Add form around basic example.

0.1.2 - 2017-01-20

  • Don't specify typeahead menu width inline. Allows custom CSS to override it.

0.1.0 - 2017-01-19

  • Initial release.
  • Basic functionality, minimal styling, only two examples, incomplete tests.