Newer
Older
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
/**
* The AutoComplete control provides the front-end logic for text-entry suggestion and
* completion functionality.
*
* @module autocomplete
* @requires yahoo, dom, event, datasource
* @optional animation, connection
* @namespace YAHOO.widget
* @title AutoComplete Widget
*/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/**
* The AutoComplete class provides the customizable functionality of a plug-and-play DHTML
* auto completion widget. Some key features:
* <ul>
* <li>Navigate with up/down arrow keys and/or mouse to pick a selection</li>
* <li>The drop down container can "roll down" or "fly out" via configurable
* animation</li>
* <li>UI look-and-feel customizable through CSS, including container
* attributes, borders, position, fonts, etc</li>
* </ul>
*
* @class AutoComplete
* @constructor
* @param elInput {HTMLElement} DOM element reference of an input field.
* @param elInput {String} String ID of an input field.
* @param elContainer {HTMLElement} DOM element reference of an existing DIV.
* @param elContainer {String} String ID of an existing DIV.
* @param oDataSource {YAHOO.widget.DataSource} DataSource instance.
* @param oConfigs {Object} (optional) Object literal of configuration params.
*/
YAHOO.widget.AutoComplete = function(elInput,elContainer,oDataSource,oConfigs) {
if(elInput && elContainer && oDataSource) {
// Validate DataSource
if (oDataSource && (oDataSource instanceof YAHOO.widget.DataSource)) {
this.dataSource = oDataSource;
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid DataSource", "error", this.toString());
return;
}
// Validate input element
if(YAHOO.util.Dom.inDocument(elInput)) {
if(typeof elInput == "string") {
this._sName = "instance" + YAHOO.widget.AutoComplete._nIndex + " " + elInput;
this._oTextbox = document.getElementById(elInput);
}
else {
this._sName = (elInput.id) ?
"instance" + YAHOO.widget.AutoComplete._nIndex + " " + elInput.id:
"instance" + YAHOO.widget.AutoComplete._nIndex;
this._oTextbox = elInput;
}
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid input element", "error", this.toString());
return;
}
// Validate container element
if(YAHOO.util.Dom.inDocument(elContainer)) {
if(typeof elContainer == "string") {
this._oContainer = document.getElementById(elContainer);
}
else {
this._oContainer = elContainer;
}
if(this._oContainer.style.display == "none") {
YAHOO.log("The container may not display properly if display is set to \"none\" in CSS", "warn", this.toString());
}
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid container element", "error", this.toString());
return;
}
// Set any config params passed in to override defaults
if (typeof oConfigs == "object") {
for(var sConfig in oConfigs) {
if (sConfig) {
this[sConfig] = oConfigs[sConfig];
}
}
}
// Initialization sequence
this._initContainer();
this._initProps();
this._initList();
this._initContainerHelpers();
// Set up events
var oSelf = this;
var oTextbox = this._oTextbox;
// Events are actually for the content module within the container
var oContent = this._oContainer._oContent;
// Dom events
YAHOO.util.Event.addListener(oTextbox,"keyup",oSelf._onTextboxKeyUp,oSelf);
YAHOO.util.Event.addListener(oTextbox,"keydown",oSelf._onTextboxKeyDown,oSelf);
YAHOO.util.Event.addListener(oTextbox,"focus",oSelf._onTextboxFocus,oSelf);
YAHOO.util.Event.addListener(oTextbox,"blur",oSelf._onTextboxBlur,oSelf);
YAHOO.util.Event.addListener(oContent,"mouseover",oSelf._onContainerMouseover,oSelf);
YAHOO.util.Event.addListener(oContent,"mouseout",oSelf._onContainerMouseout,oSelf);
YAHOO.util.Event.addListener(oContent,"scroll",oSelf._onContainerScroll,oSelf);
YAHOO.util.Event.addListener(oContent,"resize",oSelf._onContainerResize,oSelf);
if(oTextbox.form) {
YAHOO.util.Event.addListener(oTextbox.form,"submit",oSelf._onFormSubmit,oSelf);
}
YAHOO.util.Event.addListener(oTextbox,"keypress",oSelf._onTextboxKeyPress,oSelf);
// Custom events
this.textboxFocusEvent = new YAHOO.util.CustomEvent("textboxFocus", this);
this.textboxKeyEvent = new YAHOO.util.CustomEvent("textboxKey", this);
this.dataRequestEvent = new YAHOO.util.CustomEvent("dataRequest", this);
this.dataReturnEvent = new YAHOO.util.CustomEvent("dataReturn", this);
this.dataErrorEvent = new YAHOO.util.CustomEvent("dataError", this);
this.containerExpandEvent = new YAHOO.util.CustomEvent("containerExpand", this);
this.typeAheadEvent = new YAHOO.util.CustomEvent("typeAhead", this);
this.itemMouseOverEvent = new YAHOO.util.CustomEvent("itemMouseOver", this);
this.itemMouseOutEvent = new YAHOO.util.CustomEvent("itemMouseOut", this);
this.itemArrowToEvent = new YAHOO.util.CustomEvent("itemArrowTo", this);
this.itemArrowFromEvent = new YAHOO.util.CustomEvent("itemArrowFrom", this);
this.itemSelectEvent = new YAHOO.util.CustomEvent("itemSelect", this);
this.unmatchedItemSelectEvent = new YAHOO.util.CustomEvent("unmatchedItemSelect", this);
this.selectionEnforceEvent = new YAHOO.util.CustomEvent("selectionEnforce", this);
this.containerCollapseEvent = new YAHOO.util.CustomEvent("containerCollapse", this);
this.textboxBlurEvent = new YAHOO.util.CustomEvent("textboxBlur", this);
// Finish up
oTextbox.setAttribute("autocomplete","off");
YAHOO.widget.AutoComplete._nIndex++;
YAHOO.log("AutoComplete initialized","info",this.toString());
}
// Required arguments were not found
else {
YAHOO.log("Could not instantiate AutoComplete due invalid arguments", "error", this.toString());
}
};
/////////////////////////////////////////////////////////////////////////////
//
// Public member variables
//
/////////////////////////////////////////////////////////////////////////////
/**
* The DataSource object that encapsulates the data used for auto completion.
* This object should be an inherited object from YAHOO.widget.DataSource.
*
* @property dataSource
* @type YAHOO.widget.DataSource
*/
YAHOO.widget.AutoComplete.prototype.dataSource = null;
/**
* Number of characters that must be entered before querying for results. A negative value
* effectively turns off the widget. A value of 0 allows queries of null or empty string
* values.
*
* @property minQueryLength
* @type Number
* @default 1
*/
YAHOO.widget.AutoComplete.prototype.minQueryLength = 1;
/**
* Maximum number of results to display in results container.
*
* @property maxResultsDisplayed
* @type Number
* @default 10
*/
YAHOO.widget.AutoComplete.prototype.maxResultsDisplayed = 10;
/**
* Number of seconds to delay before submitting a query request. If a query
* request is received before a previous one has completed its delay, the
* previous request is cancelled and the new request is set to the delay.
*
* @property queryDelay
* @type Number
* @default 0.5
*/
YAHOO.widget.AutoComplete.prototype.queryDelay = 0.5;
/**
* Class name of a highlighted item within results container.
*
Loading full blame...