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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/*
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.
*
* @property highlightClassName
* @type String
* @default "yui-ac-highlight"
*/
YAHOO.widget.AutoComplete.prototype.highlightClassName = "yui-ac-highlight";
/**
* Class name of a pre-highlighted item within results container.
*
* @property prehighlightClassName
* @type String
*/
YAHOO.widget.AutoComplete.prototype.prehighlightClassName = null;
/**
* Query delimiter. A single character separator for multiple delimited
* selections. Multiple delimiter characteres may be defined as an array of
* strings. A null value or empty string indicates that query results cannot
* be delimited. This feature is not recommended if you need forceSelection to
* be true.
*
* @property delimChar
* @type String | String[]
*/
YAHOO.widget.AutoComplete.prototype.delimChar = null;
/**
* Whether or not the first item in results container should be automatically highlighted
* on expand.
*
* @property autoHighlight
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.autoHighlight = true;
/**
* Whether or not the input field should be automatically updated
* with the first query result as the user types, auto-selecting the substring
* that the user has not typed.
*
* @property typeAhead
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.typeAhead = false;
/**
* Whether or not to animate the expansion/collapse of the results container in the
* horizontal direction.
*
* @property animHoriz
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.animHoriz = false;
/**
* Whether or not to animate the expansion/collapse of the results container in the
* vertical direction.
*
* @property animVert
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.animVert = true;
/**
* Speed of container expand/collapse animation, in seconds..
*
* @property animSpeed
* @type Number
* @default 0.3
*/
YAHOO.widget.AutoComplete.prototype.animSpeed = 0.3;
/**
* Whether or not to force the user's selection to match one of the query
* results. Enabling this feature essentially transforms the input field into a
* <select> field. This feature is not recommended with delimiter character(s)
* defined.
*
* @property forceSelection
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.forceSelection = false;
/**
* Whether or not to allow browsers to cache user-typed input in the input
* field. Disabling this feature will prevent the widget from setting the
* autocomplete="off" on the input field. When autocomplete="off"
* and users click the back button after form submission, user-typed input can
* be prefilled by the browser from its cache. This caching of user input may
* not be desired for sensitive data, such as credit card numbers, in which
* case, implementers should consider setting allowBrowserAutocomplete to false.
*
* @property allowBrowserAutocomplete
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.allowBrowserAutocomplete = true;
/**
* Whether or not the results container should always be displayed.
* Enabling this feature displays the container when the widget is instantiated
* and prevents the toggling of the container to a collapsed state.
*
* @property alwaysShowContainer
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.alwaysShowContainer = false;
/**
* Whether or not to use an iFrame to layer over Windows form elements in
* IE. Set to true only when the results container will be on top of a
* <select> field in IE and thus exposed to the IE z-index bug (i.e.,
* 5.5 < IE < 7).
*
* @property useIFrame
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.useIFrame = false;
/**
* Whether or not the results container should have a shadow.
*
* @property useShadow
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.useShadow = false;
/////////////////////////////////////////////////////////////////////////////
//
// Public methods
//
/////////////////////////////////////////////////////////////////////////////
/**
* Public accessor to the unique name of the AutoComplete instance.
*
* @method toString
* @return {String} Unique name of the AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.toString = function() {
return "AutoComplete " + this._sName;
};
/**
* Returns true if container is in an expanded state, false otherwise.
*
* @method isContainerOpen
* @return {Boolean} Returns true if container is in an expanded state, false otherwise.
*/
YAHOO.widget.AutoComplete.prototype.isContainerOpen = function() {
return this._bContainerOpen;
};
/**
* Public accessor to the internal array of DOM <li> elements that
* display query results within the results container.
*
* @method getListItems
* @return {HTMLElement[]} Array of <li> elements within the results container.
*/
YAHOO.widget.AutoComplete.prototype.getListItems = function() {
return this._aListItems;
};
/**
* Public accessor to the data held in an <li> element of the
* results container.
*
* @method getListItemData
* @return {Object | Object[]} Object or array of result data or null
*/
YAHOO.widget.AutoComplete.prototype.getListItemData = function(oListItem) {
if(oListItem._oResultData) {
return oListItem._oResultData;
}
else {
return false;
}
};
/**
* Sets HTML markup for the results container header. This markup will be
* inserted within a <div> tag with a class of "yui-ac-hd".
*
* @method setHeader
* @param sHeader {String} HTML markup for results container header.
*/
YAHOO.widget.AutoComplete.prototype.setHeader = function(sHeader) {
if(sHeader) {
if(this._oContainer._oContent._oHeader) {
this._oContainer._oContent._oHeader.innerHTML = sHeader;
this._oContainer._oContent._oHeader.style.display = "block";
}
}
else {
this._oContainer._oContent._oHeader.innerHTML = "";
this._oContainer._oContent._oHeader.style.display = "none";
}
};
/**
* Sets HTML markup for the results container footer. This markup will be
* inserted within a <div> tag with a class of "yui-ac-ft".
*
* @method setFooter
* @param sFooter {String} HTML markup for results container footer.
*/
YAHOO.widget.AutoComplete.prototype.setFooter = function(sFooter) {
if(sFooter) {
if(this._oContainer._oContent._oFooter) {
this._oContainer._oContent._oFooter.innerHTML = sFooter;
this._oContainer._oContent._oFooter.style.display = "block";
}
}
else {
this._oContainer._oContent._oFooter.innerHTML = "";
this._oContainer._oContent._oFooter.style.display = "none";
}
};
/**
* Sets HTML markup for the results container body. This markup will be
* inserted within a <div> tag with a class of "yui-ac-bd".
*
* @method setBody
* @param sBody {String} HTML markup for results container body.
*/
YAHOO.widget.AutoComplete.prototype.setBody = function(sBody) {
if(sBody) {
if(this._oContainer._oContent._oBody) {
this._oContainer._oContent._oBody.innerHTML = sBody;
this._oContainer._oContent._oBody.style.display = "block";
this._oContainer._oContent.style.display = "block";
}
}
else {
this._oContainer._oContent._oBody.innerHTML = "";
this._oContainer._oContent.style.display = "none";
}
this._maxResultsDisplayed = 0;
};
/**
* Overridable method that converts a result item object into HTML markup
* for display. Return data values are accessible via the oResultItem object,
* and the key return value will always be oResultItem[0]. Markup will be
* displayed within <li> element tags in the container.
*
* @method formatResult
* @param oResultItem {Object} Result item representing one query result. Data is held in an array.
* @param sQuery {String} The current query string.
* @return {String} HTML markup of formatted result data.
*/
YAHOO.widget.AutoComplete.prototype.formatResult = function(oResultItem, sQuery) {
var sResult = oResultItem[0];
if(sResult) {
return sResult;
}
else {
return "";
}
};
/**
* Overridable method called before container expands allows implementers to access data
* and DOM elements.
*
* @method doBeforeExpandContainer
* @return {Boolean} Return true to continue expanding container, false to cancel the expand.
*/
YAHOO.widget.AutoComplete.prototype.doBeforeExpandContainer = function(oResultItem, sQuery) {
return true;
};
/**
* Makes query request to the DataSource.
*
* @method sendQuery
* @param sQuery {String} Query string.
*/
YAHOO.widget.AutoComplete.prototype.sendQuery = function(sQuery) {
this._sendQuery(sQuery);
};
/////////////////////////////////////////////////////////////////////////////
//
// Public events
//
/////////////////////////////////////////////////////////////////////////////
/**
* Fired when the input field receives focus.
*
* @event textboxFocusEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.textboxFocusEvent = null;
/**
* Fired when the input field receives key input.
*
* @event textboxKeyEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param nKeycode {Number} The keycode number.
*/
YAHOO.widget.AutoComplete.prototype.textboxKeyEvent = null;
/**
* Fired when the AutoComplete instance makes a query to the DataSource.
*
* @event dataRequestEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
*/
YAHOO.widget.AutoComplete.prototype.dataRequestEvent = null;
/**
* Fired when the AutoComplete instance receives query results from the data
* source.
*
* @event dataReturnEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
* @param aResults {Object[]} Results array.
*/
YAHOO.widget.AutoComplete.prototype.dataReturnEvent = null;
/**
* Fired when the AutoComplete instance does not receive query results from the
* DataSource due to an error.
*
* @event dataErrorEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
*/
YAHOO.widget.AutoComplete.prototype.dataErrorEvent = null;
/**
* Fired when the results container is expanded.
*
* @event containerExpandEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.containerExpandEvent = null;
/**
* Fired when the input field has been prefilled by the type-ahead
* feature.
*
* @event typeAheadEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
* @param sPrefill {String} The prefill string.
*/
YAHOO.widget.AutoComplete.prototype.typeAheadEvent = null;
/**
* Fired when result item has been moused over.
*
* @event itemMouseOverEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item moused to.
*/
YAHOO.widget.AutoComplete.prototype.itemMouseOverEvent = null;
/**
* Fired when result item has been moused out.
*
* @event itemMouseOutEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item moused from.
*/
YAHOO.widget.AutoComplete.prototype.itemMouseOutEvent = null;
/**
* Fired when result item has been arrowed to.
*
* @event itemArrowToEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item arrowed to.
*/
YAHOO.widget.AutoComplete.prototype.itemArrowToEvent = null;
/**
* Fired when result item has been arrowed away from.
*
* @event itemArrowFromEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item arrowed from.
*/
YAHOO.widget.AutoComplete.prototype.itemArrowFromEvent = null;
/**
* Fired when an item is selected via mouse click, ENTER key, or TAB key.
*
* @event itemSelectEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The selected <li> element item.
* @param oData {Object} The data returned for the item, either as an object,
* or mapped from the schema into an array.
*/
YAHOO.widget.AutoComplete.prototype.itemSelectEvent = null;
/**
* Fired when a user selection does not match any of the displayed result items.
* Note that this event may not behave as expected when delimiter characters
* have been defined.
*
* @event unmatchedItemSelectEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The user-typed query string.
*/
YAHOO.widget.AutoComplete.prototype.unmatchedItemSelectEvent = null;
/**
* Fired if forceSelection is enabled and the user's input has been cleared
* because it did not match one of the returned query results.
*
* @event selectionEnforceEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.selectionEnforceEvent = null;
/**
* Fired when the results container is collapsed.
*
* @event containerCollapseEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.containerCollapseEvent = null;
/**
* Fired when the input field loses focus.
*
* @event textboxBlurEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.textboxBlurEvent = null;
/////////////////////////////////////////////////////////////////////////////
//
// Private member variables
//
/////////////////////////////////////////////////////////////////////////////
/**
* Internal class variable to index multiple AutoComplete instances.
*
* @property _nIndex
* @type Number
* @default 0
* @private
*/
YAHOO.widget.AutoComplete._nIndex = 0;
/**
* Name of AutoComplete instance.
*
* @property _sName
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sName = null;
/**
* Text input field DOM element.
*
* @property _oTextbox
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._oTextbox = null;
/**
* Whether or not the input field is currently in focus. If query results come back
* but the user has already moved on, do not proceed with auto complete behavior.
*
* @property _bFocused
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bFocused = true;
/**
* Animation instance for container expand/collapse.
*
* @property _oAnim
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._oAnim = null;
/**
* Container DOM element.
*
* @property _oContainer
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._oContainer = null;
/**
* Whether or not the results container is currently open.
*
* @property _bContainerOpen
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bContainerOpen = false;
/**
* Whether or not the mouse is currently over the results
* container. This is necessary in order to prevent clicks on container items
* from being text input field blur events.
*
* @property _bOverContainer
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bOverContainer = false;
/**
* Array of <li> elements references that contain query results within the
* results container.
*
* @property _aListItems
* @type HTMLElement[]
* @private
*/
YAHOO.widget.AutoComplete.prototype._aListItems = null;
/**
* Number of <li> elements currently displayed in results container.
*
* @property _nDisplayedItems
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nDisplayedItems = 0;
/**
* Internal count of <li> elements displayed and hidden in results container.
*
* @property _maxResultsDisplayed
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._maxResultsDisplayed = 0;
/**
* Current query string
*
* @property _sCurQuery
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sCurQuery = null;
/**
* Past queries this session (for saving delimited queries).
*
* @property _sSavedQuery
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sSavedQuery = null;
/**
* Pointer to the currently highlighted <li> element in the container.
*
* @property _oCurItem
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._oCurItem = null;
/**
* Whether or not an item has been selected since the container was populated
* with results. Reset to false by _populateList, and set to true when item is
* selected.
*
* @property _bItemSelected
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bItemSelected = false;
/**
* Key code of the last key pressed in textbox.
*
* @property _nKeyCode
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nKeyCode = null;
/**
* Delay timeout ID.
*
* @property _nDelayID
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nDelayID = -1;
/**
* Src to iFrame used when useIFrame = true. Supports implementations over SSL
* as well.
*
* @property _iFrameSrc
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._iFrameSrc = "javascript:false;";
/**
* For users typing via certain IMEs, queries must be triggered by intervals,
* since key events yet supported across all browsers for all IMEs.
*
* @property _queryInterval
* @type Object
* @private
*/
YAHOO.widget.AutoComplete.prototype._queryInterval = null;
/**
* Internal tracker to last known textbox value, used to determine whether or not
* to trigger a query via interval for certain IME users.
*
* @event _sLastTextboxValue
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sLastTextboxValue = null;
/////////////////////////////////////////////////////////////////////////////
//
// Private methods
//
/////////////////////////////////////////////////////////////////////////////
/**
* Updates and validates latest public config properties.
*
* @method __initProps
* @private
*/
YAHOO.widget.AutoComplete.prototype._initProps = function() {
// Correct any invalid values
var minQueryLength = this.minQueryLength;
if(isNaN(minQueryLength) || (minQueryLength < 1)) {
minQueryLength = 1;
}
var maxResultsDisplayed = this.maxResultsDisplayed;
if(isNaN(this.maxResultsDisplayed) || (this.maxResultsDisplayed < 1)) {
this.maxResultsDisplayed = 10;
}
var queryDelay = this.queryDelay;
if(isNaN(this.queryDelay) || (this.queryDelay < 0)) {
this.queryDelay = 0.5;
}
var aDelimChar = (this.delimChar) ? this.delimChar : null;
if(aDelimChar) {
if(typeof aDelimChar == "string") {
this.delimChar = [aDelimChar];
}
else if(aDelimChar.constructor != Array) {
this.delimChar = null;
}
}
var animSpeed = this.animSpeed;
if((this.animHoriz || this.animVert) && YAHOO.util.Anim) {
if(isNaN(animSpeed) || (animSpeed < 0)) {
animSpeed = 0.3;
}
if(!this._oAnim ) {
oAnim = new YAHOO.util.Anim(this._oContainer._oContent, {}, this.animSpeed);
this._oAnim = oAnim;
}
else {
this._oAnim.duration = animSpeed;
}
}
if(this.forceSelection && this.delimChar) {
YAHOO.log("The forceSelection feature has been enabled with delimChar defined.","warn", this.toString());
}
};
/**
* Initializes the results container helpers if they are enabled and do
* not exist
*
* @method _initContainerHelpers
* @private
*/
YAHOO.widget.AutoComplete.prototype._initContainerHelpers = function() {
if(this.useShadow && !this._oContainer._oShadow) {
var oShadow = document.createElement("div");
oShadow.className = "yui-ac-shadow";
this._oContainer._oShadow = this._oContainer.appendChild(oShadow);
}
if(this.useIFrame && !this._oContainer._oIFrame) {
var oIFrame = document.createElement("iframe");
oIFrame.src = this._iFrameSrc;
oIFrame.frameBorder = 0;
oIFrame.scrolling = "no";
oIFrame.style.position = "absolute";
oIFrame.style.width = "100%";
oIFrame.style.height = "100%";
oIFrame.tabIndex = -1;
this._oContainer._oIFrame = this._oContainer.appendChild(oIFrame);
}
};
/**
* Initializes the results container once at object creation
*
* @method _initContainer
* @private
*/
YAHOO.widget.AutoComplete.prototype._initContainer = function() {
if(!this._oContainer._oContent) {
// The oContent div helps size the iframe and shadow properly
var oContent = document.createElement("div");
oContent.className = "yui-ac-content";
oContent.style.display = "none";
this._oContainer._oContent = this._oContainer.appendChild(oContent);
var oHeader = document.createElement("div");
oHeader.className = "yui-ac-hd";
oHeader.style.display = "none";
this._oContainer._oContent._oHeader = this._oContainer._oContent.appendChild(oHeader);
var oBody = document.createElement("div");
oBody.className = "yui-ac-bd";
this._oContainer._oContent._oBody = this._oContainer._oContent.appendChild(oBody);
var oFooter = document.createElement("div");
oFooter.className = "yui-ac-ft";
oFooter.style.display = "none";
this._oContainer._oContent._oFooter = this._oContainer._oContent.appendChild(oFooter);
}
else {
YAHOO.log("Could not initialize the container","warn",this.toString());
}
};
/**
* Clears out contents of container body and creates up to
* YAHOO.widget.AutoComplete#maxResultsDisplayed <li> elements in an
* <ul> element.
*
* @method _initList
* @private
*/
YAHOO.widget.AutoComplete.prototype._initList = function() {
this._aListItems = [];
while(this._oContainer._oContent._oBody.hasChildNodes()) {
var oldListItems = this.getListItems();
if(oldListItems) {
for(var oldi = oldListItems.length-1; oldi >= 0; i--) {
oldListItems[oldi] = null;
}
}
this._oContainer._oContent._oBody.innerHTML = "";
}
var oList = document.createElement("ul");
oList = this._oContainer._oContent._oBody.appendChild(oList);
for(var i=0; i<this.maxResultsDisplayed; i++) {
var oItem = document.createElement("li");
oItem = oList.appendChild(oItem);
this._aListItems[i] = oItem;
this._initListItem(oItem, i);
}
this._maxResultsDisplayed = this.maxResultsDisplayed;
};
/**
* Initializes each <li> element in the container list.
*
* @method _initListItem
* @param oItem {HTMLElement} The <li> DOM element.
* @param nItemIndex {Number} The index of the element.
* @private
*/
YAHOO.widget.AutoComplete.prototype._initListItem = function(oItem, nItemIndex) {
var oSelf = this;
oItem.style.display = "none";
oItem._nItemIndex = nItemIndex;
oItem.mouseover = oItem.mouseout = oItem.onclick = null;