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

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

This example uses a DS_JSFunction DataSource pointing to a JavaScript function that returns data as an array of strings. Since the data for this example is already loaded into memory, queries should be very fast to return data, and since there is no server load concern, the AutoComplete instance can be configured to have a query delay of zero seconds.

In this example, the AutoComplete instance is able to keep its container always open by customizing the appropriate CSS styles and enabling the alwaysShowContainer property. We hook into the custom events containerExpandEvent and containerCollapseEvent and calling the setHeader(), setBody(), and setFooter() methods to dynamically update the contents of the open container. Finally, the AutoComplete's formatResults() method has been customized to display multiple data fields in the container.

View example in new window.

Filter the US states:

  • Arkansas (AR)
  • Arizona (AZ)
  • Alaska (AK)
  • Alabama (AL)
  • Connecticut (CT)
  • Colorado (CO)
  • California (CA)
  • Delaware (DE)
  • Florida (FL)
  • Georgia (GA)
  • Hawaii (HI)
  • Iowa (IA)
  • Indiana (IN)
  • Illinois (IL)
  • Idaho (ID)
  • Kentucky (KY)
  • Kansas (KS)
  • Louisiana (LA)
  • Montana (MT)
  • Missouri (MO)
  • Mississippi (MS)
  • Minnesota (MN)
  • Michigan (MI)
  • Massachusetts (MA)
  • Maryland (MD)
  • Maine (ME)
  • North Carolina (NC)
  • North Dakota (ND)
  • New York (NY)
  • New Mexico (NM)
  • New Jersey (NJ)
  • New Hampshire (NH)
  • Nevada (NV)
  • Nebraska (NE)
  • Oregon (OR)
  • Oklahoma (OK)
  • Ohio (OH)
  • Pennsylvania (PA)
  • Rhode Island (RI)
  • South Dakota (SD)
  • South Carolina (SC)
  • Texas (TX)
  • Tennessee (TN)
  • Utah (UT)
  • Virginia (VA)
  • Vermont (VT)
  • Wyoming (WY)
  • Wisconsin (WI)
  • West Virginia (WV)
  • Washington (WA)

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:

1function 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 = oResponse.length - 1; i >= 0; i--) { 
20                aResults.push([oResponse[i].STATE, oResponse[i].ABBR]); 
21            } 
22        } 
23        return aResults; 
24    } 
25} 
26 
27var 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 
39YAHOO.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 | ?

YUI Logger Output:

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

Reload with logging
and debugging enabled.

More AutoComplete Control Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings