|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Array Example</title>
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./examples/autocomplete/css/examples.css">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>Two DataSource instances point to in-memory JavaScript arrays. The first
array holds the 50 US states. The second array itself holds arrays of US
area codes and their corresponding states.</p>
<h3>AutoComplete</h3>
<p>Since the two DataSources for this example are already loaded into memory
via JavaScript arrays, queries should be very fast to return data. Therefore,
both AutoComplete instances are configured to have a query delay of zero
seconds.</p.
<p>A few configurations have also been made to aid the usability of the
widgets. The autoHighlight and typeAhead features can help reduce the number
of user actions it takes to submit a valid selection. The
prehighlightClassName feature provides an supplemental visual feedback for mouse
events.</p>
<p>Additionally, the second AutoComplete instance also has been enhanced to
display two data fields in the container: the area code and the area code's
state. The forceSelection feature has been enabled to prevent the user from
typing in a free-form selection.</p>
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida" // Entire array not shown
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"] // Entire array not shown
];
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp.typeAhead = true;
oAutoComp.useShadow = true;
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp2.typeAhead = true;
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/event/event-debug.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->
<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"],
["208", "Idaho"],
["209", "California"],
["210", "Texas"],
["212", "New York"],
["213", "California"],
["214", "Texas"],
["215", "Pennsylvania"],
["216", "Ohio"],
["217", "Illinois"],
["218", "Minnesota"],
["219", "Indiana"],
["224", "Illinois"],
["225", "Louisiana"],
["227", "Maryland"],
["228", "Mississippi"],
["229", "Georgia"],
["231", "Michigan"],
["234", "Ohio"],
["239", "Florida"],
["240", "Maryland"],
["242", "Bahamas"],
["246", "Barbados"],
["248", "Michigan"],
["250", "British Columbia"],
["251", "Alabama"],
["252", "North Carolina"],
["253", "Washington"],
["254", "Texas"],
["256", "Alabama"],
["260", "Indiana"],
["262", "Wisconsin"],
["264", "Anguilla"],
["267", "Pennsylvania"],
["268", "Antigua and Barbuda"],
["269", "Michigan"],
["270", "Kentucky"],
["276", "Virginia"],
["281", "Texas"],
["283", "Ohio"],
["284", "British Virgin Islands"],
["289", "Ontario"],
["301", "Maryland"],
["302", "Delaware"],
["303", "Colorado"],
["304", "West Virginia"],
["305", "Florida"],
["306", "Saskatchewan, Canada"],
["307", "Wyoming"],
["308", "Nebraska"],
["309", "Illinois"],
["310", "California"],
["312", "Illinois"],
["313", "Michigan"],
["314", "Missouri"],
["315", "New York"],
["316", "Kansas"],
["317", "Indiana"],
["318", "Louisiana"],
["319", "Iowa"],
["320", "Minnesota"],
["321", "Florida"],
["323", "California"],
["330", "Ohio"],
["331", "Illinois"],
["334", "Alabama"],
["336", "North Carolina"],
["337", "Louisiana"],
["339", "Massachusetts"],
["340", "US Virgin Islands"],
["345", "Cayman Islands"],
["347", "New York"],
["351", "Massachusetts"],
["352", "Florida"],
["360", "Washington"],
["361", "Texas"],
["386", "Florida"],
["401", "Rhode Island"],
["402", "Nebraska"],
["403", "Alberta, Canada"],
["404", "Georgia"],
["405", "Oklahoma"],
["406", "Montana"],
["407", "Florida"],
["408", "California"],
["409", "Texas"],
["410", "Maryland"],
["412", "Pennsylvania"],
["413", "Massachusetts"],
["414", "Wisconsin"],
["415", "California"],
["416", "Ontario, Canada"],
["417", "Missouri"],
["418", "Quebec, Canada"],
["419", "Ohio"],
["423", "Tennessee"],
["424", "California"],
["425", "Washington"],
["434", "Virginia"],
["435", "Utah"],
["440", "Ohio"],
["441", "Bermuda"],
["443", "Maryland"],
["445", "Pennsylvania"],
["450", "Quebec, Canada"],
["464", "Illinois"],
["469", "Texas"],
["470", "Georgia"],
["473", "Grenada"],
["475", "Connecticut"],
["478", "Georgia"],
["479", "Arkansas"],
["480", "Arizona"],
["484", "Pennsylvania"],
["501", "Arkansas"],
["502", "Kentucky"],
["503", "Oregon"],
["504", "Louisiana"],
["505", "New Mexico"],
["506", "New Brunswick, Canada"],
["507", "Minnesota"],
["508", "Massachusetts"],
["509", "Washington"],
["510", "California"],
["512", "Texas"],
["513", "Ohio"],
["514", "Quebec, Canada"],
["515", "Iowa"],
["516", "New York"],
["517", "Michigan"],
["518", "New York"],
["519", "Ontario, Canada"],
["520", "Arizona"],
["530", "California"],
["540", "Virginia"],
["541", "Oregon"],
["551", "New Jersey"],
["557", "Missouri"],
["559", "California"],
["561", "Florida"],
["562", "California"],
["563", "Iowa"],
["564", "Washington"],
["567", "Ohio"],
["570", "Pennsylvania"],
["571", "Virginia"],
["573", "Missouri"],
["574", "Indiana"],
["580", "Oklahoma"],
["585", "New York"],
["586", "Michigan"],
["601", "Mississippi"],
["602", "Arizona"],
["603", "New Hampshire"],
["604", "British Columbia, Canada"],
["605", "South Dakota"],
["606", "Kentucky"],
["607", "New York"],
["608", "Wisconsin"],
["609", "New Jersey"],
["610", "Pennsylvania"],
["612", "Minnesota"],
["613", "Ontario, Canada"],
["614", "Ohio"],
["615", "Tennessee"],
["616", "Michigan"],
["617", "Massachusetts"],
["618", "Illinois"],
["619", "California"],
["620", "Kansas"],
["623", "Arizona"],
["626", "California"],
["630", "Illinois"],
["631", "New York"],
["636", "Missouri"],
["641", "Iowa"],
["646", "New York"],
["647", "Ontario, Canada"],
["649", "Turks and Caicos Islands"],
["650", "California"],
["651", "Minnesota"],
["660", "Missouri"],
["661", "California"],
["662", "Mississippi"],
["664", "Montserrat"],
["667", "Maryland"],
["670", "CNMI"],
["671", "Guam"],
["678", "Georgia"],
["682", "Texas"],
["701", "North Dakota"],
["702", "Nevada"],
["703", "Virginia"],
["704", "North Carolina"],
["705", "Ontario, Canada"],
["706", "Georgia"],
["707", "California"],
["708", "Illinois"],
["709", "Newfoundland, Canada"],
["712", "Iowa"],
["713", "Texas"],
["714", "California"],
["715", "Wisconsin"],
["716", "New York"],
["717", "Pennsylvania"],
["718", "New York"],
["719", "Colorado"],
["720", "Colorado"],
["724", "Pennsylvania"],
["727", "Florida"],
["731", "Tennessee"],
["732", "New Jersey"],
["734", "Michigan"],
["737", "Texas"],
["740", "Ohio"],
["754", "Florida"],
["757", "Viriginia"],
["758", "St. Lucia"],
["760", "California"],
["763", "Minnesota"],
["765", "Indiana"],
["767", "Dominica"],
["770", "Georgia"],
["772", "Florida"],
["773", "Illinois"],
["774", "Massachusetts"],
["775", "Nevada"],
["778", "British Columbia, Canada"],
["780", "Alberta, Canada"],
["781", "Massachusetts"],
["784", "St. Vincent & Gren."],
["785", "Kansas"],
["786", "Florida"],
["787", "Puerto Rico"],
["801", "Utah"],
["802", "Vermont"],
["803", "South Carolina"],
["804", "Virginia"],
["805", "California"],
["806", "Texas"],
["807", "Ontario, Canada"],
["808", "Hawaii"],
["809", "Dominican Republic"],
["810", "Michigan"],
["812", "Indiana"],
["813", "Florida"],
["814", "Pennsylvania"],
["815", "Illinois"],
["816", "Missouri"],
["817", "Texas"],
["818", "California"],
["819", "Quebec, Canada"],
["828", "North Carolina"],
["830", "Texas"],
["831", "California"],
["832", "Texas"],
["835", "Pennsylvania"],
["843", "South Carolina"],
["845", "New York"],
["847", "Illinois"],
["848", "New Jersey"],
["850", "Florida"],
["856", "New Jersey"],
["857", "Massachusetts"],
["858", "California"],
["859", "Kentucky"],
["860", "Connecticut"],
["862", "New Jersey"],
["863", "Florida"],
["864", "South Carolina"],
["865", "Tennessee"],
["867", "Yukon, NW Territories, Canada"],
["868", "Trinidad and Tobago"],
["869", "St. Kitts & Nevis"],
["870", "Arkansas"],
["872", "Illinois"],
["876", "Jamaica"],
["878", "Pennsylvania"],
["901", "Tennessee"],
["902", "Nova Scotia, Canada"],
["903", "Texas"],
["904", "Florida"],
["905", "Ontario, Canada"],
["906", "Michigan"],
["907", "Alaska"],
["908", "New Jersey"],
["909", "California"],
["910", "North Carolina"],
["912", "Georgia"],
["913", "Kansas"],
["914", "New York"],
["915", "Texas"],
["916", "California"],
["917", "New York"],
["918", "Oklahoma"],
["919", "North Carolina"],
["920", "Wisconsin"],
["925", "California"],
["928", "Arizona"],
["931", "Tennessee"],
["936", "Texas"],
["937", "Ohio"],
["939", "Puerto Rico"],
["940", "Texas"],
["941", "Florida"],
["947", "Michigan"],
["949", "California"],
["952", "Minnesota"],
["954", "Florida"],
["956", "Texas"],
["959", "Connecticut"],
["970", "Colorado"],
["971", "Oregon"],
["972", "Texas"],
["973", "New Jersey"],
["975", "Missouri"],
["978", "Massachusetts"],
["979", "Texas"],
["980", "North Carolina"],
["984", "North Carolina"],
["985", "Louisiana"],
["989", "Michigan"]
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.ACJSArray = function() {
var mylogger;
var oACDS,oACDS2;
var oAutoComp,oAutoComp2;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp.typeAhead = true;
oAutoComp.useShadow = true;
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp2.typeAhead = true;
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
|
nav_yui.zip 
