added YUI and YUI-ext
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
This commit is contained in:
JT Smith
parent
6bf329d68d
commit
4f68a0933c
1026 changed files with 331404 additions and 60 deletions
273
www/extras/yui/examples/autocomplete/states_jsfunction.html
Normal file
273
www/extras/yui/examples/autocomplete/states_jsfunction.html
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: JS Function 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="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
|
||||
|
||||
<style type="text/css">
|
||||
#statesmod {position:relative;padding:1em;}
|
||||
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
|
||||
#statesinput {position:absolute;width:100%;height:1.4em;}
|
||||
#statescontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#statescontainer ul {padding:5px 0;width:100%;}
|
||||
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#statescontainer li.yui-ac-highlight {background:#ff0;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Function</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<h3>DataSource</h3>
|
||||
<p>This DataSource instance points to an in-memory JavaScript function that
|
||||
returns results in an array. The function queries against an in-memory object
|
||||
literal of data that holds the 50 US states and their corresponding postal
|
||||
abbreviations.</p>
|
||||
|
||||
<h3>AutoComplete</h3>
|
||||
<p>Since the DataSource for this example is already loaded into memory,
|
||||
queries should be very fast to return data. Therefore, the AutoComplete
|
||||
instance is configured to have a query delay of zero seconds. The
|
||||
AutoComplete instance is also configured to display two data fields in its
|
||||
container: the state and its corresponding postal abbreviation. By setting
|
||||
the alwaysShowContainer property to true and customizing appropriate CSS styles, the
|
||||
container has been implemented to always be displayed. Custom event handlers
|
||||
have been hooked into containerExpandEvent and containerCollapseEvent to
|
||||
dynamically update the always open container's contents.</p>
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="statesmod">
|
||||
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
|
||||
<h2>Find a state:</h2>
|
||||
<div id="statesautocomplete">
|
||||
<input id="statesinput">
|
||||
<div id="statescontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code" style="margin-top:15em;">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#statesmod {position:relative;padding:1em;}
|
||||
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
|
||||
#statesinput {position:absolute;width:100%;height:1.4em;}
|
||||
#statescontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#statescontainer ul {padding:5px 0;width:100%;}
|
||||
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#statescontainer li.yui-ac-highlight {background:#ff0;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="statesmod">
|
||||
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
|
||||
<h2>Find a state:</h2>
|
||||
<div id="statesautocomplete">
|
||||
<input id="statesinput">
|
||||
<div id="statescontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
function getStates(sQuery) {
|
||||
aResults = [];
|
||||
if(sQuery.length > 0) {
|
||||
var charKey = sQuery.substring(0,1).toLowerCase();
|
||||
var oResponse = dataset[charKey];
|
||||
|
||||
if(oResponse) {
|
||||
for(var i = oResponse.length-1; i >= 0; i--) {
|
||||
var sKey = oResponse[i].STATE;
|
||||
var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
|
||||
|
||||
// Query found at the beginning of the key string for STARTSWITH
|
||||
// returns an array of arrays where STATE is index=0, ABBR is index=1
|
||||
if(sKeyIndex === 0) {
|
||||
aResults.unshift([sKey, oResponse[i].ABBR]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return aResults;
|
||||
}
|
||||
else { return null; }
|
||||
}
|
||||
|
||||
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 = function(){
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate JS Function DataSource
|
||||
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
|
||||
oAutoComp.alwaysShowContainer = true;
|
||||
oAutoComp.queryDelay = 0;
|
||||
oAutoComp.maxResultsDisplayed = 8;
|
||||
oAutoComp.useShadow = true;
|
||||
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
|
||||
return (sMarkup);
|
||||
};
|
||||
|
||||
// Subscribe to Custom Events
|
||||
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
|
||||
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
|
||||
},
|
||||
|
||||
// Define Custom Event handlers
|
||||
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>");
|
||||
}
|
||||
},
|
||||
|
||||
myOnContainerCollapse: function(sType, aArgs) {
|
||||
var oAutoComp = aArgs[0];
|
||||
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
|
||||
</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 dataset begins-->
|
||||
<script type="text/javascript" src="./js/states_jsfunction.js"></script>
|
||||
<!-- In-memory JS dataset ends-->
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACJSFunction = function(){
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate JS Function DataSource
|
||||
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
|
||||
oAutoComp.alwaysShowContainer = true;
|
||||
oAutoComp.queryDelay = 0;
|
||||
oAutoComp.maxResultsDisplayed = 8;
|
||||
oAutoComp.useShadow = true;
|
||||
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
|
||||
return (sMarkup);
|
||||
};
|
||||
|
||||
// Subscribe to Custom Events
|
||||
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
|
||||
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
|
||||
},
|
||||
|
||||
// Define Custom Event handlers
|
||||
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>");
|
||||
}
|
||||
},
|
||||
|
||||
myOnContainerCollapse: function(sType, aArgs) {
|
||||
var oAutoComp = aArgs[0];
|
||||
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue