1. Solving Problems: AutoComplete
Isaac Z. Schlueter
isaacs@yahoo-inc.com @izs
YUICONF 2009 http://github.com/isaacs

2. hi.

3. “real world”

4. “solving”

5. “not very much effort”
= he’s lazy.

6. The Problem

14. Shopping List

15. Shopping List
• a way to find out when the user types
something into the form element

16. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere

17. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items

18. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items
• a simple thing to wire it all together

19. invention is harder
than assembly

20. Like the man said,
very lazy.

21. The Requirements

23. small

24. accessible

25. these ones?

26. these ones?

27. omg, this all sounds
like work!

28. you can solve your
problems like this, too
(and get props for it)

30. A brief survey
of our tools

31. Node: The API
that the DOM
Should Have Been

32. Browser DOM API

33. Browser DOM API

34. // If you're LUCKY!
var f = document.getElementsByClassName("foo")
for (
var i = 0, l = f.length;
i < l;
i ++ ) {
f[i].addEventListener("click", fn);
}

35. // If you're LUCKY!
var f = document.getElementsByClassName("foo")
for (
var i = 0, l = f.length;
i < l;
i ++ ) {
f[i].addEventListener("click", fn);
}
// oh wait, that doesn't work in ie... fml.

36. Node API

37. Y.all(".foo")
.on("click", fn);

38. Node
developer.yahoo.com
/yui/3/node

39. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items
• a simple thing to wire it all together

40. Data Source:
because data is weird

41. Data Source:
because data is weird

42. Caching, data normalization, and this
thing is TINY in YUI 3!

43. Data Source
developer.yahoo.com
/yui/3/datasource

44. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items
• a simple thing to wire it all together

45. Not so similar…

46. Not so similar…

47. Not so similar…

48. Not so similar…

49. Not so similar…

50. Not so similar…

51. Not so similar…

52. Display

53. Display
• Bounding box - need to manage position,
even when the window changes height

54. Display
• Bounding box - need to manage position,
even when the window changes height
• Must support many different looks

55. Display
• Bounding box - need to manage position,
even when the window changes height
• Must support many different looks
• Overlapping anything (iframes, scrollbars,
select elements, other nasty creatures)

56. Display
• Bounding box - need to manage position,
even when the window changes height
• Must support many different looks
• Overlapping anything (iframes, scrollbars,
select elements, other nasty creatures)
• Keyboard navigation

57. Widget

58. Widget
developer.yahoo.com
/yui/3/widget

59. with Widget you can:

60. with Widget you can:
• Fix the position of the box

61. with Widget you can:
• Fix the position of the box
• Skin it and change the contents easily

62. with Widget you can:
• Fix the position of the box
• Skin it and change the contents easily
• Overlap iframes and select elements
without any hassles

63. with Widget you can:
• Fix the position of the box
• Skin it and change the contents easily
• Overlap iframes and select elements
without any hassles
• Easily extend to support keyboard and
focus events.

64. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items
• a simple thing to wire it all together

65. Plugins:
Form like Voltron

66. Plugins:
Form like Voltron

67. Decorator Pattern

68. Decorator Pattern
GoF FTW!

69. Y.one("#foo")
.plug(Y.Plugins.Foo)
.foo.doSomeFoo();

70. Y.one("#foo")
.plug(Y.Plugins.Foo)
.foo.doSomeFoo();
so, not quite Voltron, but still, pretty cool.

71. Plugin
developer.yahoo.com
/yui/3/plugin

72. Shopping List
• a way to find out when the user types
something into the form element
• a generic way to get data from a server, or
from anywhere
• a way to display the list of items
• a simple thing to wire it all together

73. Loose Coupling

74. What is a duck?

75. What is a duck?
• Water Bird

76. What is a duck?
• Water Bird
• Bird

77. What is a duck?
• Water Bird
• Bird
• Vertebrate

78. What is a duck?
• Water Bird
• Bird
• Vertebrate
• Animal

79. What is a duck?
• Water Bird
• Bird
• Vertebrate
• Animal
• Organism

80. What is a duck?
• Water Bird
• Bird
• Vertebrate
• Animal
• Organism
• Thing

81. What is a duck?

82. What is a duck?
• Swims

83. What is a duck?
• Swims
• Flies

84. What is a duck?
• Swims
• Flies
• Quacks

85. What is a duck?
• Swims
• Flies
• Quacks
• Sits on eggs

86. What is a duck?
• Swims
• Flies
• Quacks
• Sits on eggs
• Mixes
metaphors

87. Loose Coupling

88. Loose Coupling
• Pieces should provide enough value to be
used alone or in other contexts

89. Loose Coupling
• Pieces should provide enough value to be
used alone or in other contexts
• Pieces should work with any other piece
that exposes the expected API

90. Loose Coupling
• Pieces should provide enough value to be
used alone or in other contexts
• Pieces should work with any other piece
that exposes the expected API
• “Don’t call me, I’ll call you”
events > method calls

91. That’s nice and all,
but how do you
make it reusable?

92. YUI.add()
YUI.add("my-module", function (Y) {
// your code here.
}, "1.0.2", {
requires : [
"node", "plugin", "widget"
]
});

93. YUI.add()

94. YUI.add()
• Call add() on the YUI global
YUI.add(), not YUI().add()

95. YUI.add()
• Call add() on the YUI global
YUI.add(), not YUI().add()
• This adds your module to the list of
things that can be loaded with use()

96. YUI.add()

97. YUI.add()
and then later:

98. YUI.add()
and then later:
YUI().use("my-module",
function (Y) {
// do something with it
}
);

99. So... AutoComplete,
remember? You were
gonna talk about that?

100. AutoComplete:
AutoComplete AutoComplete
Node Plugin Renderer Widget
DOM YUI Node
node Wrapper
Data Source

101. Oh, wait, there’s a
problem.

102. “user presses a key”
!==
“data has been
entered”

103. onchange is too late
for our purposes

104. DOM
Events

105. keydown DOM
Events

106. keydown DOM
keyup Events

107. keydown DOM
keyup Events
keypress

108. keydown DOM
keyup Events
keypress
change

109. keydown DOM
keyup Events
keypress
change
something is missing!

110. Custom Events:
Implement the
Missing

111. myThing.on("click",
function (e) {
doSomething();
e.stopPropagation();
e.preventDefault()
// etc.
}
)

112. myThing.on("myEvent",
function (e) {
doSomething();
e.stopPropagation();
e.preventDefault()
// etc.
}
)

113. Making a New
Node Event:
it’s like creating
your own DOM

114. Try not to let the
power go to your head.

115. myEvent = {
on : function () { ... },
detach : function () { ... }
};
Y.Env.evt.plugins.myEvent = myEvent;
Y.Node.DOM_EVENTS.myEvent = myEvent;
// function bodies removed, but
// that really is the whole thing.

116. Signs you should add a
new Node event:

117. Signs you should add a
new Node event:
• Generic need related to a single element

118. Signs you should add a
new Node event:
• Generic need related to a single element
• DOM has something like what you want,
but not quite

119. Signs you should add a
new Node event:
• Generic need related to a single element
• DOM has something like what you want,
but not quite
• It “fills a hole” in the DOM API

120. Signs you should add a
new Node event:
• Generic need related to a single element
• DOM has something like what you want,
but not quite
• It “fills a hole” in the DOM API
• In other words, please don’t create your
own “click” event.

121. AutoComplete:
AutoComplete AutoComplete
Node Plugin Renderer Widget
DOM YUI Node
node Wrapper
Data Source

122. AutoComplete:
AutoComplete AutoComplete
valueChange
Node Plugin Renderer Widget
DOM YUI Node
node Wrapper
Data Source

123. AutoComplete:
valueChange

124. AutoComplete:
valueChange
Listen to key events

125. AutoComplete:
valueChange
Listen to key events
Use Y.later() to defer value check.

126. AutoComplete:
valueChange
Listen to key events
Use Y.later() to defer value check.
See if the value has changed

127. AutoComplete:
valueChange
Listen to key events
Use Y.later() to defer value check.
See if the value has changed
If the value is different than last time, fire “valueChange”

128. AutoComplete:
AutoComplete
Node Plugin

129. AutoComplete:
AutoComplete
Node Plugin
Plug into a Node object

130. AutoComplete:
AutoComplete
Node Plugin
Plug into a Node object
It gets some settings

131. AutoComplete:
AutoComplete
Node Plugin
Plug into a Node object
It gets some settings
Listens to the valueChange event

132. AutoComplete:
AutoComplete
Node Plugin
Plug into a Node object
It gets some settings
Listens to the valueChange event
Fires “ac:query” event when appropriate

133. AutoComplete:
AutoComplete
Node Plugin
Data Source

134. AutoComplete:
AutoComplete
Node Plugin
“ac:query” has
default behavior
Data Source

135. AutoComplete:
AutoComplete
Node Plugin
If not canceled, it
“ac:query” has
tells the data source
default behavior
to get some data.
Data Source

136. AutoComplete:
AutoComplete
Node Plugin
If not canceled, it
“ac:query” has
tells the data source
default behavior
to get some data.
Data Source
When/if the data returns,
it fires the “ac:load” event.

137. AutoComplete:
AutoComplete
Renderer Widget

138. AutoComplete:
Extends the Widget class
AutoComplete
Renderer Widget

139. AutoComplete:
Extends the Widget class
AutoComplete
When the user clicks on an item, call Renderer Widget
myNode.ac.set("queryValue",
selection)

140. AutoComplete:
Widget gives it a bounding AutoComplete
box, an easy way to mange Renderer Widget
position, and a render()
function to make it visible.

141. AutoComplete:
AutoComplete AutoComplete
valueChange
Node Plugin Renderer Widget
DOM YUI Node
node Wrapper
Data Source

142. AutoComplete:

143. AutoComplete:
Preview
What you are about to see is not even beta yet.
This is a slide deck, not an API doc.
Stay tuned at http://yuilibrary.com/yui3/ and
http://developer.yahoo.com/yui/3/

144. AutoComplete:
YUI().use("ac-plugin", function (Y) {
var myAC = Y.one("#ac"),
myDS = new Y.DataSource(...);
myAC.plug(Y.Plugins.ACPlugin, {
dataSource : myDS
}).ac.on("ac:load", function (results) {
doSomething(results);
});
});

145. AutoComplete:
YUI().use("ac-plugin", function (Y) {
var myAC = Y.one("#ac"),
myDS = new Y.DataSource(...);
myAC.plug(Y.Plugins.ACPlugin, {
dataSource : myDS
}).ac.on("ac:load", function (results) {
doSomething(results);
});
}); // wow, that’s a mouthful

146. defaults === win

147. Roll-up

148. Roll-up

149. Roll-up
• YUI 2 was a modular system, but each
module is all or nothing

150. Roll-up
• YUI 2 was a modular system, but each
module is all or nothing
• YUI 3 is sub-modular — more granular

151. Roll-up
• YUI 2 was a modular system, but each
module is all or nothing
• YUI 3 is sub-modular — more granular
• Roll-ups provide an easy way to trade the
customizability for the convenience

152. Just take the bits you like,
leave the rest behind.

153. AutoComplete:
AutoComplete AutoComplete
valueChange
Node Plugin Renderer Widget
DOM YUI Node
node Wrapper
Data Source

154. AutoComplete:
AutoComplete AutoComplete
valueChange
Node Plugin Renderer Widget
DOM YUI Node AutoComplete roll-up
node Wrapper
Data Source

155. AutoComplete:

156. AutoComplete:
Preview
What you are about to see is not even beta yet.
This is a slide deck, not an API doc.
Stay tuned at http://yuilibrary.com/yui3/ and
http://developer.yahoo.com/yui/3/

157. AutoComplete:
YUI().use("autocomplete", function (Y) {
var myAC = new Y.AutoComplete({
node : "#ac",
dataSource : new Y.DataSource(...)
});
});

158. In the final tally...

159. In the final tally...
• Less than 4kb of new code, mostly for the
custom DOM event. (< 2kb over the wire)

160. In the final tally...
• Less than 4kb of new code, mostly for the
custom DOM event. (< 2kb over the wire)
• Most of the work consisted of arranging
and assembling

161. In the final tally...
• Less than 4kb of new code, mostly for the
custom DOM event. (< 2kb over the wire)
• Most of the work consisted of arranging
and assembling
• Good solutions don’t have to be hard

162. AutoComplete:
Coming soon to a
YUI Library
NEAR YOU!

163. AutoComplete:
http://github.com/yui/yui3
http://github.com/isaacs/yui3

164. fin

165. ( questions )