YUI Library Examples: AutoComplete Control: Combobox, with CSS for Multiple Stacked Instances

Sample Code

Data:


1	YAHOO.example.Data.menu: {
2	breakfasts: [
3	"donuts",
4	"omelette",
5	"pancakes",
6	"yogurt"
7	],
8	lunches: [
9	"burrito",
10	"hamburger",
11	"salad",
12	"turkey sandwich"
13	],
14	dinners: [
15	"meatloaf",
16	"spaghetti",
17	"pot roast",
18	"roast chicken",
19	"steak"
20	]
21	};
	view plain \| print \| ?

CSS:


1	/* custom styles for inline instances */
2	.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
3	.yui-skin-sam .yui-ac-container { width:20em;left:0px;}
4
5	/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
6	#bAutoComplete { z-index:9001; }
7	#lAutoComplete { z-index:9000; }
8
9	/* buttons */
10	.yui-ac .yui-button {vertical-align:middle;}
11	.yui-ac .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
12	.yui-ac .open .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
	view plain \| print \| ?

Markup:


1	<label for="bInput">What would you like for breakfast?</label>
2	<div id="bAutoComplete">
3	<input id="bInput" type="text"> <span id="toggleB"></span>
4	<div id="bContainer"></div>
5	</div>
6
7	<label for="lInput">What would you like for lunch?</label>
8	<div id="lAutoComplete">
9	<input id="lInput" type="text"> <span id="toggleL"></span>
10	<div id="lContainer"></div>
11	</div>
12
13	<label for="dInput">What would you like for dinner?</label>
14	<div id="dAutoComplete">
15	<input id="dInput" type="text"> <span id="toggleD"></span>
16	<div id="dContainer"></div>
17	</div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.Combobox = function() {
2	// Instantiate DataSources
3	var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
4	var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
5	var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);
6
7	// Instantiate AutoCompletes
8	var oConfigs = {
9	prehighlightClassName: "yui-ac-prehighlight",
10	useShadow: true,
11	queryDelay: 0,
12	minQueryLength: 0,
13	animVert: .01
14	}
15	var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
16	var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
17	var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
18
19	// Breakfast combobox
20	var bToggler = YAHOO.util.Dom.get("toggleB");
21	var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
22	var toggleB = function(e) {
23	//YAHOO.util.Event.stopEvent(e);
24	if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
25	YAHOO.util.Dom.addClass(bToggler, "open")
26	}
27
28	// Is open
29	if(bAC.isContainerOpen()) {
30	bAC.collapseContainer();
31	}
32	// Is closed
33	else {
34	bAC.getInputEl().focus(); // Needed to keep widget active
35	setTimeout(function() { // For IE
36	bAC.sendQuery("");
37	},0);
38	}
39	}
40	oPushButtonB.on("click", toggleB);
41	bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
42
43	// Lunch combobox
44	var lToggler = YAHOO.util.Dom.get("toggleL");
45	var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
46	var toggleL = function(e) {
47	//YAHOO.util.Event.stopEvent(e);
48	if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
49	YAHOO.util.Dom.addClass(lToggler, "open")
50	}
51
52	// Is open
53	if(lAC.isContainerOpen()) {
54	lAC.collapseContainer();
55	}
56	// Is closed
57	else {
58	lAC.getInputEl().focus(); // Needed to keep widget active
59	setTimeout(function() { // For IE
60	lAC.sendQuery("");
61	},0);
62	}
63	}
64	oPushButtonL.on("click", toggleL);
65	lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});
66
67	// Dinner combobox
68	var dToggler = YAHOO.util.Dom.get("toggleD");
69	var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
70	var toggleD = function(e) {
71	//YAHOO.util.Event.stopEvent(e);
72	if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
73	YAHOO.util.Dom.addClass(dToggler, "open")
74	}
75
76	// Is open
77	if(dAC.isContainerOpen()) {
78	dAC.collapseContainer();
79	}
80	// Is closed
81	else {
82	dAC.getInputEl().focus(); // Needed to keep widget active
83	setTimeout(function() { // For IE
84	dAC.sendQuery("");
85	},0);
86	}
87	}
88	oPushButtonD.on("click", toggleD);
89	dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});
90
91	return {
92	bDS: bDS,
93	bAC: bAC,
94	lDS: lDS,
95	lAC: lAC,
96	dDS: dDS,
97	dAC: dAC
98	};
99	}();
	view plain \| print \| ?

YAHOO.example.Combobox = function() {
    // Instantiate DataSources
    var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
    var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
    var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);

// Instantiate AutoCompletes
    var oConfigs = {
        prehighlightClassName: "yui-ac-prehighlight",
        useShadow: true,
        queryDelay: 0,
        minQueryLength: 0,
        animVert: .01
    }
    var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
    var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
    var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
    
    // Breakfast combobox
    var bToggler = YAHOO.util.Dom.get("toggleB");
    var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
    var toggleB = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
            YAHOO.util.Dom.addClass(bToggler, "open")
        }
        
        // Is open
        if(bAC.isContainerOpen()) {
            bAC.collapseContainer();
        }
        // Is closed
        else {
            bAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                bAC.sendQuery("");
            },0);
        }
    }
    oPushButtonB.on("click", toggleB);
    bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
    
    // Lunch combobox
    var lToggler = YAHOO.util.Dom.get("toggleL");
    var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
    var toggleL = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
            YAHOO.util.Dom.addClass(lToggler, "open")
        }
        
        // Is open
        if(lAC.isContainerOpen()) {
            lAC.collapseContainer();
        }
        // Is closed
        else {
            lAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                lAC.sendQuery("");
            },0);
        }
    }
    oPushButtonL.on("click", toggleL);
    lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});

// Dinner combobox
    var dToggler = YAHOO.util.Dom.get("toggleD");
    var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
    var toggleD = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
            YAHOO.util.Dom.addClass(dToggler, "open")
        }
        
        // Is open
        if(dAC.isContainerOpen()) {
            dAC.collapseContainer();
        }
        // Is closed
        else {
            dAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                dAC.sendQuery("");
            },0);
        }
    }
    oPushButtonD.on("click", toggleD);
    dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});

return {
        bDS: bDS,
        bAC: bAC,
        lDS: lDS,
        lAC: lAC,
        dDS: dDS,
        dAC: dAC
    };
}();

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

AutoComplete Control Examples:

More AutoComplete Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.