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

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

There are two AutoComplete widgets on this page that each point to a different DS_JSArray DataSource instance. Driving each DataSource is a local JavaScript array of strings: statesArray and areaCodesArray. By pointing to arrays that are already loaded into memory the widget is very fast to return data.

Enabling the prehighlightClassName feature provides supplemental visual feedback for mouse events on results in the container.

The formatResult method of the second AutoComplete instance has been enhanced to display two data fields in the container, and the forceSelection property has been enabled to prevent the user from typing in a free-form selection.

View example in new window.

Find a state:

Find an area code

Sample Code

CSS:

1/* custom styles for multiple stacked instances */ 
2#statesautocomplete, 
3#statesautocomplete2 { 
4    width:15em; /* set width here */ 
5    padding-bottom:2em; 
6} 
7#statesautocomplete { 
8    z-index:9000; /* z-index needed on top instance for ie & sf absolute inside relative issue */ 
9} 
10#statesinput, 
11#statesinput2 { 
12    _position:absolute; /* abs pos needed for ie quirks */ 
13} 
view plain | print | ?

Markup:

1<h3>Find a state:</h3> 
2<div id="statesautocomplete"> 
3    <input id="statesinput" type="text"> 
4    <div id="statescontainer"></div> 
5</div> 
6<h3>Find an area code</h3> 
7<div id="statesautocomplete2"> 
8    <input id="statesinput2" type="text"> 
9    <div id="statescontainer2"></div> 
10</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.statesArray = [ 
2    "Alabama", 
3    "Alaska", 
4    "Arizona", 
5    "Arkansas", 
6    "California", 
7    "Colorado", 
8    "Connecticut", 
9    "Delaware", 
10    "Florida", 
11    ... // Entire array not shown 
12]; 
13 
14YAHOO.example.areacodesArray = [ 
15    ["201", "New Jersey"], 
16    ["202", "Washington, DC"], 
17    ["203", "Connecticut"], 
18    ["204", "Manitoba, Canada"], 
19    ["205", "Alabama"], 
20    ["206", "Washington"], 
21    ["207", "Maine"], 
22    ... // Entire array not shown 
23]; 
24 
25YAHOO.example.ACJSArray = new function() { 
26    // Instantiate first JS Array DataSource 
27    this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray); 
28 
29    // Instantiate first AutoComplete 
30    this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS); 
31    this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight"; 
32    this.oAutoComp.typeAhead = true; 
33    this.oAutoComp.useShadow = true; 
34    this.oAutoComp.minQueryLength = 0; 
35    this.oAutoComp.textboxFocusEvent.subscribe(function(){ 
36        var sInputValue = YAHOO.util.Dom.get('statesinput').value; 
37        if(sInputValue.length === 0) { 
38            var oSelf = this; 
39            setTimeout(function(){oSelf.sendQuery(sInputValue);},0); 
40        } 
41    }); 
42 
43    // Instantiate second JS Array DataSource 
44    this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray); 
45 
46    // Instantiate second AutoComplete 
47    this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2); 
48    this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight"; 
49    this.oAutoComp2.typeAhead = true; 
50    this.oAutoComp2.useShadow = true; 
51    this.oAutoComp2.forceSelection = true; 
52    this.oAutoComp2.formatResult = function(oResultItem, sQuery) { 
53        var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; 
54        return (sMarkup); 
55    }; 
56}; 
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 © 2008 Yahoo! Inc. All rights reserved.

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