An all-new AutoComplete widget is landing in YUI 3.3.0. In this talk from YUIConf 2010, AutoComplete author Ryan Grove will take you on a whirlwind tour of some of the many autocomplete patterns it makes possible, as well as a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities.
12. New modular API provides more
ïŹexibility and easier extension to
allow for countless autocomplete
patterns.
Photo: http://www.ïŹickr.com/photos/grdloizaga/817443503/
14. Synthetic event; ïŹres when an
input ïŹeldâs value changes.
AutoComplete modules
autocomplete-base
event-valuechange
autocomplete-
ïŹlters
autocomplete-
highlighters
autocomplete-list
Core logic and API. No UI,
minimal dependencies.
Optional prepackaged result
ïŹlters and highlighters.
Traditional list widget, just like
Mom used to make.
29. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
30. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
31. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
32. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
33. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
34. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
35. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
// Widget-style.
YUI().use('autocomplete', function (Y) {
var ac = new Y.AutoComplete({
inputNode: '#my-input',
render : true,
source : 'select * from search.suggest where query="{query}"'
});
});
36. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
// Widget-style.
YUI().use('autocomplete', function (Y) {
var ac = new Y.AutoComplete({
inputNode: '#my-input',
render : true,
source : 'select * from search.suggest where query="{query}"'
});
});
37. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
// Widget-style.
YUI().use('autocomplete', function (Y) {
var ac = new Y.AutoComplete({
inputNode: '#my-input',
render : true,
source : 'select * from search.suggest where query="{query}"'
});
});
38. // Plugin-style.
YUI().use('autocomplete', function (Y) {
Y.one('#my-input').plug(Y.Plugin.AutoComplete, {
source: 'select * from search.suggest where query="{query}"'
});
});
Basic usage (YQL result source)
// Widget-style.
YUI().use('autocomplete', function (Y) {
var ac = new Y.AutoComplete({
inputNode: '#my-input',
render : true,
source : 'select * from search.suggest where query="{query}"'
});
});
61. Prepackaged Filters &
Highlighters
âą All are case-insensitive by default, but case-
sensitive versions are available (charMatchCase,
phraseMatchCase, etc.).
âą Accent-folding versions are available as well
(charMatchFold, phraseMatchFold, etc.).
charMatch
phraseMatch
startsWith
wordMatch
66. function customFilter(query, results) {
return Y.Array.filter(results, function (result) {
result = result.toLowerCase();
// Only include results that start with an "a" and contain
// the query string.
return result.charAt(0) === 'a' &&
result.indexOf(query) !== -1;
});
}
Custom Filter
67. function customFilter(query, results) {
return Y.Array.filter(results, function (result) {
result = result.toLowerCase();
// Only include results that start with an "a" and contain
// the query string.
return result.charAt(0) === 'a' &&
result.indexOf(query) !== -1;
});
}
Custom Filter
68. function customFilter(query, results) {
return Y.Array.filter(results, function (result) {
result = result.toLowerCase();
// Only include results that start with an "a" and contain
// the query string.
return result.charAt(0) === 'a' &&
result.indexOf(query) !== -1;
});
}
Custom Filter
69. function customFilter(query, results) {
return Y.Array.filter(results, function (result) {
result = result.toLowerCase();
// Only include results that start with an "a" and contain
// the query string.
return result.charAt(0) === 'a' &&
result.indexOf(query) !== -1;
});
}
Custom Filter
70. function customFilter(query, results) {
return Y.Array.filter(results, function (result) {
result = result.toLowerCase();
// Only include results that start with an "a" and contain
// the query string.
return result.charAt(0) === 'a' &&
result.indexOf(query) !== -1;
});
}
Custom Filter
99. âą Synthetic event. Fires when an input nodeâs value
changes due to user input.
âą Handles keystrokes, pastes, and IME input.
âą Creates a level playing ïŹeld across browsers,
particularly with languages that have multi-stroke
characters.
event-valuechange
103. escape
âą Static utility methods for escaping strings.
âą Currently has methods for escaping HTML and
regex strings. More to come in future releases.
âą Feel free to add your own escaping methods to
the Y.Escape namespace (and share on the
Gallery).
111. And now, a brief interlude wherein I
whine about having discovered, yesterday
afternoon, that âUnicodeâ is a
registered trademark of the
UnicodeÂź Consortium.
121. â-wordbreak
âą Implements â text segmentation guidelines for
word breaking.
âą Handles edge cases like contractions, decimals,
thousands separators, Katakana, non-Latin
punctuation, etc.
âą Not perfect, but much smarter than /b/.
âą Will have an actual name before 3.3.0 ïŹnal.
125. highlight
âą Static utility methods for highlighting strings using
HTML.
âą Supports phrase highlighting, start-of-string
highlighting, and word highlighting.
âą Can use accent folded strings for comparisons
while highlighting the original, non-folded string.
âą Smart enough not to highlight inside HTML
entities like ".
âą Doesnât infringe any trademarks.
137. Why <b>?
âą HTML5 deïŹnes a new <mark> element for
denoting the relevance (as opposed to the
importance) of a span of text.
âą It recommends using <mark> âto highlight a part
of quoted text that was not originally emphasizedâ.
âą But, since <mark> isnât yet supported in all
browsers, we use <b>, which HTML5 deïŹnes as a
last resort for highlighting text without implying
importance.
âą You can customize the highlighting markup by
changing Y.Highlight._TEMPLATE.
More details: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-
level-semantics.html#the-mark-element
139. What I just said
but with bullets
âą Modular architecture makes it easy to
implement a range of autocomplete patterns.
âą Dead simple JSONP and YQL support.
âą Use prepackaged ïŹlters and highlighters with
word breaking and accent folding, or roll
your own.
âą Create custom result formatters with just a
few lines of code.
âą AutoComplete and friends are available now in
YUI 3.3.0pr1.
Photo: http://www.ïŹickr.com/photos/tim_norris/2789759648/
148. Ryan Grove,YUI Team
@yaypie on Twitter
https://github.com/rgrove/
Slides: http://lanyrd.com/smym
Photo: http://www.ïŹickr.com/photos/damaradeaella/2822846819/