AutoComplete
From BC$ MobileTV Wiki
AutoComplete is a rich interactive feature which simplifies the input process in a form on a website or in a web application. Typically it will contain a pre-compiled list of items and suggest a new item from the list matching each character typed into the input box.
Examples include Yahoo!'s excellent interactive AutoComplete Search Suggestions[1], TAXI's jump menu[2] and Facebook's "Friend Selector tool"[3].
Resources
- HTML5 DataList element -- <datalist>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | DEMO | CanIUse[4][5]
- Prototype-based (Facebook-style) AutoComplete: http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/
- JavaScript AutoComplete: http://www.mattkruse.com/javascript/autocomplete/
- jQuery AutoComplete: http://www.dyve.net/jquery/?autocomplete
- Comprehensive LIST of AutoCompletes: http://www.ajaxrain.com/tag.php?tag=autocomplete
- Simple AngulasJS directive for adding google places autocomplete to a textbox element: https://github.com/wpalahnuk/ngAutocomplete (polyfill to replcae Google Places when its decomissioned)
Tutorials
- Introducing the HTML5 “datalist” Element: https://webdesign.tutsplus.com/tutorials/introducing-the-html5-datalist-element--webdesign-9888
- HTML5 DataList Example: https://www.viralpatel.net/html5-datalist-example/
- Example of a dynamic HTML5 datalist control: https://www.raymondcamden.com/2012/06/14/example-of-a-dynamic-html5-datalist-control/
- Adding options to datalist from Mysql Table records.: https://www.plus2net.com/php_tutorial/datalist-add-options.php
External Links
- wikipedia: Autocomplete
- What's New in HTML5 Forms -- The Datalist Control: https://www.htmlgoodies.com/html5/markup/whats-new-in-html5-forms-the-datalist-control.html
References
- ↑ Yahoo!'s YUI Autocomplete: http://developer.yahoo.com/yui/autocomplete/
- ↑ TAXI's autocomplete jump navigation menu: http://www.taxi.ca
- ↑ http://wiki.developers.facebook.com/index.php/Multi_friend_selector
- ↑ HTML <datalist> Tag: https://www.w3schools.com/tags/tag_datalist.asp
- ↑ HTML <datalist> Tag -- legacy support: https://www.quackit.com/html/tags/html_datalist_tag.cfm#snippet3 (simply wrap in a <select> dropdown to "gracefully degrade" on older browsers)
See Also
HTML5 | AJAX | Web Services | API
