SlideShare a Scribd company logo

Introducing YUI 3 AutoComplete

Ryan Grove, profile picture
Ryan Grove

The document provides a comprehensive overview of the YUI Autocomplete widget, detailing its evolution from YUI 0.10.0 to YUI 3, which introduced a modular API for greater flexibility in implementing various autocomplete patterns. It discusses features such as source options for fetching results, customizable filters, and highlighters, as well as providing examples of usage through plugin and widget styles. Additionally, the document emphasizes accessibility and mobile readiness of the YUI Autocomplete component.

Technology
1 of 148
Downloaded 100 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
Introducing YUI 3 AutoComplete
A brief history of YUI AutoComplete Photo: http://www.flickr.com/photos/margolove/1204358675/
AutoComplete appeared in YUI 0.10.0, the first public release ofYUI.
It was one of the first open source JavaScript autocomplete widgets.
Since then, it has been one of the most popularYUI widgets.
There are lots of different autocomplete patterns in use on the web today.
In the YUI 2 world, this meant AutoComplete had to provide many options within a single module.
Patterns that weren’t similar to a traditional list-based autocomplete weren’t well-served by this model.
This isn’t a problem in the more granular YUI 3 world.
Say hello to YUI 3 AutoComplete Photo: http://www.flickr.com/photos/christianschuit/4201189548/
Download video: http://j.mp/yui3ac1
New modular API provides more flexibility and easier extension to allow for countless autocomplete patterns. Photo: http://www.flickr.com/photos/grdloizaga/817443503/
autocomplete-base event-valuechange autocomplete- filters autocomplete- highlighters autocomplete-list AutoComplete modules
Synthetic event; fires when an input field’s value changes. AutoComplete modules autocomplete-base event-valuechange autocomplete- filters autocomplete- highlighters autocomplete-list Core logic and API. No UI, minimal dependencies. Optional prepackaged result filters and highlighters. Traditional list widget, just like Mom used to make.
1KB 2KB 3KB 4KB 5KB 6KB 7KB 8KB 2.8.2 3.3.0 AutoComplete module size (min + gzip) Filters Highlighters List Base
90% feature parity withYUI 2 AutoComplete. * * This is a highly scientific number. I swear.
autocomplete-base autocomplete-list allowBrowserAutocomplete activateFirstItem inputNode align maxResults alwaysShowList minQueryLength circular queryDelay visible queryDelimiter tabSelect requestTemplate zIndex resultFilters resultFormatter resultHighlighter resultListLocator resultTextLocator source yqlProtocol
autocomplete-base autocomplete-list allowBrowserAutocomplete activateFirstItem inputNode align maxResults alwaysShowList minQueryLength circular queryDelay visible queryDelimiter tabSelect requestTemplate zIndex resultFilters resultFormatter resultHighlighter resultListLocator resultTextLocator source yqlProtocol
Results can come from a DataSource, Array, or Object.
Results can also come from a JSONP URL or a YQL query. This is awesome.
Use the prepackaged result filters and highlighters, or provide your own.
Built-in filters and highlighters support word breaking and accent folding.
Provide a custom result formatter to free yourself from boring text-only results.
Fully accessible out of the box.
Mobile-ready out of the box.
Photo: http://www.flickr.com/photos/tonymadrid/4696501004/
Photo: http://www.flickr.com/photos/tonymadrid/4696501004/ No keyboard? No point loading keyboard code.
Speaking of code... SHOW ME IT. Photo: http://www.flickr.com/photos/tambako/3535904860/
// 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)
// 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)
// 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)
// 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)
// 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)
// 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)
// 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}"' }); });
// 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}"' }); });
// 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}"' }); });
// 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}"' }); });
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: 'http://example.com/search?q={query}&callback={callback}' }); JSONP result source
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: 'http://example.com/search?q={query}&callback={callback}' }); JSONP result source
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: 'http://example.com/search?q={query}&callback={callback}' }); JSONP result source
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: ['apple pie', 'peach pie', 'pecan pie', 'pumpkin pie'] }); Array and object result sources
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: ['apple pie', 'peach pie', 'pecan pie', 'pumpkin pie'] }); Array and object result sources
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: ['apple pie', 'peach pie', 'pecan pie', 'pumpkin pie'] }); Array and object result sources Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: { pies : ['apple', 'peach', 'pecan', 'pumpkin'], cookies: ['chocolate chip', 'molasses', 'peanut butter'] } });
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: ['apple pie', 'peach pie', 'pecan pie', 'pumpkin pie'] }); Array and object result sources Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: { pies : ['apple', 'peach', 'pecan', 'pumpkin'], cookies: ['chocolate chip', 'molasses', 'peanut butter'] } });
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: ['apple pie', 'peach pie', 'pecan pie', 'pumpkin pie'] }); Array and object result sources Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: { pies : ['apple', 'peach', 'pecan', 'pumpkin'], cookies: ['chocolate chip', 'molasses', 'peanut butter'] } });
var ds = new Y.DataSource.IO({ source: 'http://example.com/search' }); Y.one('#my-input').plug(Y.Plugin.AutoComplete, { requestTemplate: '?q={query}', source: ds }); DataSource result source
var ds = new Y.DataSource.IO({ source: 'http://example.com/search' }); Y.one('#my-input').plug(Y.Plugin.AutoComplete, { requestTemplate: '?q={query}', source: ds }); DataSource result source
Deep Dive Photo: http://www.flickr.com/photos/steelcityhobbies/1084984228/
Locating Results Photo: http://www.flickr.com/photos/st3f4n/3951143570/
[ "apple pie", "peach pie", "pecan pie", "pumpkin pie" ] Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: 'http://example.com/search?q={query}&callback={callback}' }); ✓ No problem.
{ "status": "success", "search": { "results": [ "apple pie", "peach pie", "pecan pie", "pumpkin pie" ] } } Y.one('#my-input').plug(Y.Plugin.AutoComplete, { source: 'http://example.com/search?q={query}&callback={callback}' }); ✗ Bit of a problem.
{ "status": "success", "search": { "results": [ "apple pie", "peach pie", "pecan pie", "pumpkin pie" ] } } Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'search.results', source: 'http://example.com/search?q={query}&callback={callback}' }); ✓ Awesome.
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: function (response) { return response && response.search && response.search.results; }, source: 'http://example.com/search?q={query}&callback={callback}' }); The list locator can also be a function.
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'results', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'results', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
{ "results": [ { "created_at": "Fri, 29 Oct 2010 07:00:58 +0000", "from_user": "EricF", "to_user_id": null, "text": "YUIConf is looking like it's gonna be crazy good!", "id": 29064356310, "from_user_id": 2469883, "iso_language_code": "en" }, ... ] } Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'results', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
{ "results": [ { "created_at": "Fri, 29 Oct 2010 07:00:58 +0000", "from_user": "EricF", "to_user_id": null, "text": "YUIConf is looking like it's gonna be crazy good!", "id": 29064356310, "from_user_id": 2469883, "iso_language_code": "en" }, ... ] } Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'results', resultTextLocator: 'text', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultListLocator: 'results', resultTextLocator: function (result) { return result.text; }, source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' }); Like the list locator, the text locator can be a function.
Filtering & Highlighting Results Photo: http://www.flickr.com/photos/27953349@N06/4465442322/
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
YUIConf  is  super  awesome,  and  so  is  YUI. charMatch: 'yui'
YUIConf  is  super  awesome,  and  so  is  YUI. phraseMatch: 'yui'
YUIConf  is  super  awesome,  and  so  is  YUI. startsWith: 'yui'
YUIConf  is  super  awesome,  and  so  is  YUI. wordMatch: 'yui'
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
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
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
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
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
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultFilters: customFilter, source: 'select * from search.suggest where query="{query}"' }); Custom Filter
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultFilters: customFilter, source: 'select * from search.suggest where query="{query}"' }); Custom Filter
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultFilters: [customFilter, 'wordMatch', otherFilter, ...], source: 'select * from search.suggest where query="{query}"' }); Custom Filter
function customHighlighter(query, results) { return Y.Array.map(results, function (result) { return Y.Highlight.all(result, query); }); } Custom Highlighter
function customHighlighter(query, results) { return Y.Array.map(results, function (result) { return Y.Highlight.all(result, query); }); } Custom Highlighter
function customHighlighter(query, results) { return Y.Array.map(results, function (result) { return Y.Highlight.all(result, query); }); } Custom Highlighter
function customHighlighter(query, results) { return Y.Array.map(results, function (result) { return Y.Highlight.all(result, query); }); } Custom Highlighter
function customHighlighter(query, results) { return Y.Array.map(results, function (result) { return Y.Highlight.all(result, query); }); } Custom Highlighter
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultHighlighter: customHighlighter, source: 'select * from search.suggest where query="{query}"' }); Custom Highlighter
Y.one('#my-input').plug(Y.Plugin.AutoComplete, { resultHighlighter: customHighlighter, source: 'select * from search.suggest where query="{query}"' }); Custom Highlighter
Formatting Results Photo: http://www.flickr.com/photos/doug88888/4544745031/
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
{ "results": [ { "created_at": "Fri, 29 Oct 2010 07:00:58 +0000", "from_user": "EricF", "to_user_id": null, "text": "YUIConf is looking like it's gonna be crazy good!", "id": 29064356310, "from_user_id": 2469883, "iso_language_code": "en" }, ... ] } user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
[ "<b class="yui3-highlight">YUIConf</b> is looking like it's gonna be crazy good!", ... ] user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
function twitterFormatter(query, raw, highlighted) { return Y.Array.map(raw, function (result, i) { return Y.Lang.sub( '<div class="tweet">' + '<div class="hd">' + '<img src="{img}" class="photo" ' + 'alt="Profile photo for {user}">' + '</div>' + '<div class="bd">' + '<strong class="user">{user}</strong>' + '<span class="tweet-text">{text}</span>' + '</div>' + '<div class="ft">{time}</div>' + '</div>', { id : result.id, img : result.profile_image_url, text: highlighted[i], time: result.created_at, user: result.from_user } ); }); }
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { resultFormatter: twitterFormatter, resultHighlighter: 'phraseMatch', resultListLocator: 'results', resultTextLocator: 'text', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { resultFormatter: twitterFormatter, resultHighlighter: 'phraseMatch', resultListLocator: 'results', resultTextLocator: 'text', source: 'http://search.twitter.com/search.json?q={query}&' + 'callback={callback}' });
.tweet { clear: both; margin: 6px 0; padding: 2px 0; } .tweet .hd { float: left; } .tweet .bd, .tweet .ft { margin-left: 52px; } .tweet .ft { color: #cfcfcf; font-size: 11px; } .tweet .photo { height: 48px; margin: 2px 0; width: 48px; } .tweet .user { margin-right: 6px; }
Download video: http://j.mp/yui3ac2
Other new modules Photo: http://www.flickr.com/photos/thomashawk/55519741/
• Synthetic event. Fires when an input node’s value changes due to user input. • Handles keystrokes, pastes, and IME input. • Creates a level playing field across browsers, particularly with languages that have multi-stroke characters. event-valuechange
Y.one('#my-input').on('valueChange', function (e) { Y.log('Old value: ' + e.prevVal); Y.log('New value: ' + e.newVal); }); event-valuechange
Y.one('#my-input').on('valueChange', function (e) { Y.log('Old value: ' + e.prevVal); Y.log('New value: ' + e.newVal); }); event-valuechange
Y.one('#my-input').on('valueChange', function (e) { Y.log('Old value: ' + e.prevVal); Y.log('New value: ' + e.newVal); }); event-valuechange
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).
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
Y.Escape.html('<script>alert("pwned!")</script>'); // => '&lt;script&gt;alert(&quot;pwned!&quot;)&lt;&#x2F;script&gt;' Y.Escape.regex('$3.14 (plus tax)'); // => '$3.14 (plus tax)' escape
And now, a brief interlude wherein I whine about having discovered, yesterday afternoon, that “Unicode” is a registered trademark of the Unicode® Consortium.
®?
®?
As a result, the word “Unicode” has been replaced with ☃ in the following slides.
I apologize for the inconvenience.
☃-accentfold • Helpers for creating and working with accent- folded strings. • Accent folding converts “résumé” to “resume” (etc.) for easier comparison. • Should be a last resort. Only use it when better tools aren’t available on the server. Don’t fold strings you will display to the user. • Will have an actual name before 3.3.0 final.
Y.☃.AccentFold.fold('résumé'); // => 'resume' Y.☃.AccentFold.compare('résumé', 'resume'); // => true Y.☃.AccentFold.filter(['föö', 'bår', 'móó'], function (str) { return str.indexOf('o') !== -1; }); // => ['föö', 'móó'] ☃-accentfold
Y.☃.AccentFold.fold('résumé'); // => 'resume' Y.☃.AccentFold.compare('résumé', 'resume'); // => true Y.☃.AccentFold.filter(['föö', 'bår', 'móó'], function (str) { return str.indexOf('o') !== -1; }); // => ['föö', 'móó'] ☃-accentfold
Y.☃.AccentFold.fold('résumé'); // => 'resume' Y.☃.AccentFold.compare('résumé', 'resume'); // => true Y.☃.AccentFold.filter(['föö', 'bår', 'móó'], function (str) { return str.indexOf('o') !== -1; }); // => ['föö', 'móó'] ☃-accentfold
Y.☃.AccentFold.fold('résumé'); // => 'resume' Y.☃.AccentFold.compare('résumé', 'resume'); // => true Y.☃.AccentFold.filter(['föö', 'bår', 'móó'], function (str) { return str.indexOf('o') !== -1; }); // => ['föö', 'móó'] ☃-accentfold
☃-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 final.
Y.☃.WordBreak.getWords("A kilobyte's just 1,024 bytes."); // => ["A", "kilobyte's", "just", "1,024", "bytes"] Y.☃.WordBreak.getWords('パイが好きです'); // => ["パイ", "が", "好", "き", "で", "す"] ☃-wordbreak
Y.☃.WordBreak.getWords("A kilobyte's just 1,024 bytes."); // => ["A", "kilobyte's", "just", "1,024", "bytes"] Y.☃.WordBreak.getWords('パイが好きです'); // => ["パイ", "が", "好", "き", "で", "す"] ☃-wordbreak
Y.☃.WordBreak.getWords("A kilobyte's just 1,024 bytes."); // => ["A", "kilobyte's", "just", "1,024", "bytes"] Y.☃.WordBreak.getWords('パイが好きです'); // => ["パイ", "が", "好", "き", "で", "す"] ☃-wordbreak
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 &quot;. • Doesn’t infringe any trademarks.
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Y.Highlight.all('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' Y.Highlight.start('YUIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YUI</b>Conf 2010: YUI rocks!' Y.Highlight.words('YUIConf 2010: YUI rocks!', 'yui'); // => 'YUIConf 2010: <b class="yui3-highlight">YUI</b> rocks!' Y.Highlight.allFold('YÜIConf 2010: YUI rocks!', 'yui'); // => '<b class="yui3-highlight">YÜI</b>Conf 2010: <b class="yui3- highlight">YUI</b> rocks!' highlight
Why <b>? • HTML5 defines 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 defines 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
Photo: http://www.flickr.com/photos/tim_norris/2789759648/
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 filters 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.flickr.com/photos/tim_norris/2789759648/
One more thing... Photo: http://www.flickr.com/photos/jabb/3502160522/
Download video: http://j.mp/yui3ac3
YUI().use('gallery-node-tokeninput', function (Y) { Y.one('#my-input').plug(Y.Plugin.TokenInput); }); node-tokeninput
YUI().use('gallery-node-tokeninput', function (Y) { Y.one('#my-input').plug(Y.Plugin.TokenInput); }); node-tokeninput
YUI().use('gallery-node-tokeninput', function (Y) { Y.one('#my-input').plug(Y.Plugin.TokenInput); }); node-tokeninput
YUI().use('gallery-node-tokeninput', function (Y) { Y.one('#my-input').plug(Y.Plugin.TokenInput); }); node-tokeninput
...but beware, there are some rough edges at the moment.
Photo: http://www.flickr.com/photos/damaradeaella/2822846819/
Ryan Grove,YUI Team @yaypie on Twitter https://github.com/rgrove/ Slides: http://lanyrd.com/smym Photo: http://www.flickr.com/photos/damaradeaella/2822846819/

More Related Content

PPTX
You Either Surf Or You Fight
MrDys
 
PDF
Implementing AutoComplete for Freemarker and Velocity languages in ACE Editor
peychevi
 
PPTX
Green cloud computing
Ram kumar
 
PDF
YUI 介紹 @YZU
Joseph Chiang
 
PPTX
Get started with YUI
Adam Lu
 
ZIP
Solving Problems with YUI3: AutoComplete
IsaacSchlueter
 
PDF
Implementing auto complete using JQuery
Bhushan Mulmule
 
ZIP
Solving Real World Problems with YUI 3: AutoComplete
IsaacSchlueter
 
You Either Surf Or You Fight
MrDys
 
Implementing AutoComplete for Freemarker and Velocity languages in ACE Editor
peychevi
 
Green cloud computing
Ram kumar
 
YUI 介紹 @YZU
Joseph Chiang
 
Get started with YUI
Adam Lu
 
Solving Problems with YUI3: AutoComplete
IsaacSchlueter
 
Implementing auto complete using JQuery
Bhushan Mulmule
 
Solving Real World Problems with YUI 3: AutoComplete
IsaacSchlueter
 

Recently uploaded (20)

PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PDF
KodekX | Application Modernization Development
KodekX
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Teaching material agriculture food technology
LiaRayya
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
KodekX | Application Modernization Development
KodekX
 
Ad

Featured (20)

PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
PDF
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
PDF
Everything You Need To Know About ChatGPT
Expeed Software
 
PDF
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
PDF
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
PDF
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
PDF
Skeleton Culture Code
Skeleton Technologies
 
PDF
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
PDF
Content Methodology: A Best Practices Report (Webinar)
contently
 
PPTX
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
PDF
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
PDF
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
PDF
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
PDF
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
PDF
Getting into the tech field. what next
Tessa Mero
 
PDF
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
PDF
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Ad

Introducing YUI 3 AutoComplete