WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Predictive Text Search Functionality

for

From: Bryan Garaventa
Date: Feb 9, 2015 1:49PM

Hi,
It sounds like what you are referring to is an auto-suggest combobox widget. E.G ARIA Combobox
http://www.w3.org/TR/wai-aria/roles#combobox

There are live demos of this functionality available at

1 Form with overlays:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
(Where the State field opens an autosuggest list when you start typing, and the Country field has an arrow toggle to pull down the
attached list)

2 Simple with overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match
)/demo.htm
(Where the edit field matches substrings to populate automatic suggestions.)

3 Simple with static inline rendering:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Word%20Match)/dem
o.htm
(Where the typing of full words like 'modem' or 'printer' will automatically match list items; using an inline display instead of a
layer)

4 Simulated with toggleable overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm
(Where the simulated button opens a language dropdown when clicked or tapped, which can then be scrolled through)

Also, the following WAI discussion thread outlines the various principles and coding processes needed to make this work across
desktop and mobile.
http://lists.w3.org/Archives/Public/public-pfwg/2014Nov/0205.html

All the best,
Bryan