YUI Library Examples: AutoComplete Control: Query a JavaScript Function for In-memory Data

Sample Code

CSS:


1	/* custom styles for scrolling container */
2	#statesautocomplete {
3	width:15em; /* set width of widget here*/
4	height:12em; /* define height for container to appear inline */
5	}
6	#statescontainer .yui-ac-content {
7	max-height:11em;overflow:auto;overflow-x:hidden; /* scrolling */
8	_height:11em; /* ie6 */
9	}
	view plain \| print \| ?

Markup:


1	<h3>Filter the US states:</h3>
2	<div id="statesautocomplete">
3	<input id="statesinput" type="text">
4	<div id="statescontainer"></div>
5	</div>
	view plain \| print \| ?

JavaScript:


1	function getStates(sQuery) {
2	aResults = [];
3	if (sQuery && sQuery.length > 0) {
4	var charKey = sQuery.substring(0, 1).toLowerCase();
5	var oResponse = dataset[charKey];
6	if (oResponse) {
7	for (var i = oResponse.length - 1; i >= 0; i--) {
8	var sKey = oResponse[i].STATE;
9	var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
10	if (sKeyIndex === 0) {
11	aResults.unshift([sKey, oResponse[i].ABBR]);
12	}
13	}
14	return aResults;
15	}
16	} else {
17	for (var letter in dataset) {
18	var oResponse = dataset[letter];
19	for(var i = 0; i < oResponse.length; i++) {
20	aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
21	}
22	}
23	return aResults;
24	}
25	}
26
27	var dataset = {
28	'a' : [{"STATE" : "Alabama", "ABBR" : "AL"},
29	{"STATE" : "Alaska", "ABBR" : "AK"},
30	{"STATE" : "Arizona", "ABBR" : "AZ"},
31	{"STATE" : "Arkansas", "ABBR" : "AR"}],
32	'b' : [ ],
33	'c' : [{"STATE" : "California", "ABBR" : "CA"},
34	{"STATE" : "Colorado", "ABBR" : "CO"},
35	{"STATE" : "Connecticut", "ABBR" : "CT"}],
36	... // Entire dataset not shown
37	};
38
39	YAHOO.example.ACJSFunction = new function(){
40	// Instantiate JS Function DataSource
41	this.oACDS = new YAHOO.widget.DS_JSFunction(getStates);
42	this.oACDS.maxCacheEntries = 0;
43
44	// Instantiate AutoComplete
45	this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
46	this.oAutoComp.alwaysShowContainer = true;
47	this.oAutoComp.minQueryLength = 0;
48	this.oAutoComp.maxResultsDisplayed = 50;
49	this.oAutoComp.formatResult = function(oResultItem, sQuery) {
50	var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
51	return (sMarkup);
52	};
53
54	// Show custom message if no results found
55	this.myOnDataReturn = function(sType, aArgs) {
56	var oAutoComp = aArgs[0];
57	var sQuery = aArgs[1];
58	var aResults = aArgs[2];
59
60	if(aResults.length == 0) {
61	oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
62	}
63	};
64	this.oAutoComp.dataReturnEvent.subscribe(this.myOnDataReturn);
65
66	// Preload content in the container
67	this.oAutoComp.sendQuery("");
68	};
	view plain \| print \| ?

var dataset = {
    'a' : [{"STATE" : "Alabama", "ABBR" : "AL"},
		{"STATE" : "Alaska", "ABBR" : "AK"},
		{"STATE" : "Arizona", "ABBR" : "AZ"},
		{"STATE" : "Arkansas", "ABBR" : "AR"}],
	'b' : [ ],
	'c' : [{"STATE" : "California", "ABBR" : "CA"},
		{"STATE" : "Colorado", "ABBR" : "CO"},
		{"STATE" : "Connecticut", "ABBR" : "CT"}],
    ... // Entire dataset not shown
};

YAHOO.example.ACJSFunction = new function(){
    // Instantiate JS Function DataSource
    this.oACDS = new YAHOO.widget.DS_JSFunction(getStates);
    this.oACDS.maxCacheEntries = 0;

// Instantiate AutoComplete
    this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
    this.oAutoComp.alwaysShowContainer = true;
    this.oAutoComp.minQueryLength = 0;
    this.oAutoComp.maxResultsDisplayed = 50;
    this.oAutoComp.formatResult = function(oResultItem, sQuery) {
        var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
        return (sMarkup);
    };

// Show custom message if no results found
    this.myOnDataReturn = function(sType, aArgs) {
        var oAutoComp = aArgs[0];
        var sQuery = aArgs[1];
        var aResults = aArgs[2];

if(aResults.length == 0) {
            oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
        }
    };
    this.oAutoComp.dataReturnEvent.subscribe(this.myOnDataReturn);

// Preload content in the container
    this.oAutoComp.sendQuery("");
};