• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Work with all your cloud files (Drive, Dropbox, and Slack and Gmail attachments) and documents (Google Docs, Sheets, and Notion) in one place. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!

View
 

Autocomplete

Page history last edited by Scott González 8 years, 10 months ago

 

type: widget

release: 1.8

status: released

documentation: http://api.jqueryui.com/autocomplete/

demo: http://jqueryui.com/autocomplete/

 

 


1 - Description:

 

An autocomplete widget helps entering data into text inputs by providing a list of suggetions based on a partial input. Similar behaviour is available in most browsers, but limited to data that the browser already knows about. This widget allows the application developer to provide application specific data, like results from a product search.

 

If your input or textarea needs multiple (autocompleted) values, use ListBuilder, which builds upon Autocomplete. Autocomplete behavior can also be attached to a select element, in the form of a Combobox.

 


Pariuri Sportive 

2 - Visual Design:

 

 

 


 

3 - Functional Specifications/Requirements:

 

The list of suggestions...

  • is displayed when the input has focus and at least one character (or more, depending on minLength option) is entered
    • when the input has a value and gets focus, the value has to be modified to display the list. 
  • updates on each keydown event.
  • closes on Tab, and...
    • focus moves to the next tabbable element.
    • selects the item that had focus (if any).
  • selects the item that has focus on Enter and prevents the default form submit.
  • allows the form to submit on Enter if no item has focus.  
  • is navigable with the keyboard.

 

Datamodel

The autocomplete requires an array of objects (maps), containing two required properties:

  • A label property to display in the autocomplete list ("John Doe <john@doe.com>").
    • this will be displayed as plain-textmac data recovery
  • A value property that ends up in the input field once selected ("john@doe.com");
    • if undefined, same as label

 

Each object can have any amount of additional data associated, usually for filling in related field. This could include:

  • an id property: a primary key in a database (65313, "FIN57984GFGH69FA")
  • an index to map to an object (0, 1, ..., n)
  • a shorthand like a country or province value ('US', 'NY')

 

If only an array of strings is provided, the widget will normalize that to an array of objects, using each string as both label and value. If only label is provided, its also used as value, and the other way round.

 

This data must be provided by the source-option.

 

Keyboard

  • When the menu is open:
    • UP - Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item.
    • DOWN - Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.
    • ESCAPE - Close the menu.
    • ENTER - Select the currently focused item and close the menu.
    • TAB - Select the currently focused item, close the menu, and move focus to the next focusable element. 
    • PAGE UP/DOWN - Scroll through a page of items (based on height of menu).
      • It's generally a bad idea to display so many items that users need to page.
  • When the menu is closed:
    • UP/DOWN - Open the menu, if the minLength has been met.

 

Accessibility

  • Follows ARIA best practices, with the following exceptions:
    • No ARIA roles or properties are applied to the element.
    • A live region is used to announce the number of items.
  • NOTES:
    • Most AT don't announce changes to the menu because the input has focus.
      • JAWS is the exception, always announcing changes for any aria-activedescendant.
    • Relying solely on the value in the input updating during traversal is not enough to ensure announcements.
      • In some cases, such as multiple words, the user will opt to prevent the input from updating during traversal.
    • Regardless of everything else, live regions are necessary for announcing the number of items. 
  • Proposal for future ARIA
    • Text field gets role=combobox and aria-own=menu-id
    • The menu is responsible for all other information.
      • Number of results.
      • Announcing items as they're activated via aria-activedescendant.
    • Would live regions still be necessary for announcing when there are no results? 

 


 

4 - Markup & Style:

 

(only used prior to implementation)

 


 

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/autocomplete/default.html

 


 

 

6 - Open issues being discussed

 

none

 

Comments (0)

You don't have permission to comment on this page.