removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1,23 +0,0 @@
|
|||
h1 {font-size:144%;}
|
||||
h2 {font-size:129%;}
|
||||
h3 {font-size:114%;}
|
||||
h4 {font-size:100%;}
|
||||
body {margin:1em;font-family:verdana,arial,sans-serif;}
|
||||
ul {width:80%;}
|
||||
dl {padding:1em;}
|
||||
|
||||
#hd {position:relative;}
|
||||
#hd .logo {width:65px;height:38px;vertical-align:middle;padding-right:10px;}
|
||||
|
||||
#bd h1,h2,h3,p{padding:.5em;}
|
||||
|
||||
#code {clear:both;}
|
||||
#code .code {padding:1em;background:#DEDEDE;border:1px solid black;font-size:92%;}
|
||||
|
||||
#logger {position:relative;float:right;clear:both;margin:1em;width:30em;padding:.5em;}
|
||||
|
||||
#panel {width:40%;background:#DEDEDE;border:1px solid #000;margin:2em;padding:1em;}
|
||||
#panel div {margin-top:1em;padding-bottom:.5em;border-bottom:1px solid #404040;}
|
||||
|
||||
#coder {position:absolute;background:#DEDEDE;border:1px solid #000;margin:1em;padding:.5em;bottom:10px;right:10px;}
|
||||
#output {position:relative;width:30em;height:15em;margin-top:1em;}
|
||||
|
|
@ -1,350 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Customizable 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">
|
||||
|
||||
<style type="text/css">
|
||||
#custommod {position:relative;padding:1em;}
|
||||
#customautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
||||
#custominput {position:absolute;width:100%;height:1.4em;}
|
||||
#customcontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#customcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#customcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#customcontainer ul {padding:5px 0;width:100%;}
|
||||
#customcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#customcontainer li.yui-ac-highlight {background:#ff0;}
|
||||
#customcontainer 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> :: Customizable Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Code generator begins
|
||||
<div id="coder">
|
||||
<h3>Sample code</h3>
|
||||
<textarea id="output"></textarea>
|
||||
</div>
|
||||
Code generator ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<p>When this page loads, a DataSource instance is created that points to the
|
||||
same DataSource as the <a href="./ysearch_flat.html">Query a custom PHP
|
||||
script for flat data</a> example. However, by changing the values below, you
|
||||
can customize the AutoComplete implementation to your own configurations.
|
||||
</p>
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="custommod">
|
||||
<form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
|
||||
<h2>Customize your own AutoComplete widget:</h2>
|
||||
<div id="customautocomplete">
|
||||
<input id="custominput">
|
||||
<div id="customcontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Panel begins -->
|
||||
<form id="panel">
|
||||
|
||||
<!-- The following is in a select to demonstrate the useIFrame feature -->
|
||||
<select><option>Customize configurations for AutoComplete</option></select>
|
||||
|
||||
<div>
|
||||
<input id="animhoriz" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
|
||||
<label for="animhoriz">Animate Horizontally</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="animvert" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
|
||||
<label for="animvert">Animate Vertically</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="animspeed">Animation Speed: </label>
|
||||
<input id="animspeed" type="text" size="2" value="0.3">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateAnimSpeed();">
|
||||
</div>
|
||||
<div>
|
||||
<input id="useshadow" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
|
||||
<label for="useshadow">Use Shadow</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="useiframe" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
|
||||
<label for="useiframe">Use IFrame</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="typeahead" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
|
||||
<label for="typeahead">Type Ahead</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="forceselection" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
|
||||
<label for="forceselection">Force a Selection</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="maxresults">Maximum Results: </label>
|
||||
<input id="maxresults" type="text" size="2" value="10">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMaxResults();">
|
||||
</div>
|
||||
<div>
|
||||
<label for="minquerylength">Minimum Query Length: </label>
|
||||
<input id="minquerylength" type="text" size="2" value="1">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMinQueryLength();"
|
||||
</div>
|
||||
<div>
|
||||
<label for="querydelay">Query Delay: </label>
|
||||
<input id="querydelay" type="text" size="2" value="0.5">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateQueryDelay();">
|
||||
</div>
|
||||
<div>
|
||||
<label for="delimchar">Array of Delimiter Character(s)</label><br>
|
||||
<input id="delimchar" type="text" size="30" value="">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
|
||||
</div>
|
||||
<div>
|
||||
<label for="highlightclass">Highlight Classname</label><br>
|
||||
<input id="highlightclass" type="text" size="30" value="yui-ac-highlight" maxlength="30">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHighlight();">
|
||||
</div>
|
||||
<div>
|
||||
<label for="prehighlightclass">Pre-highlight Classname</label><br>
|
||||
<input id="prehighlightclass" type="text" size="30" value="" maxlength="30">
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
|
||||
</div>
|
||||
<div>
|
||||
<input id="allowbrowserautocomplete" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);" checked>
|
||||
<label for="allowbrowserautocomplete">Allow Browser Autocomplete</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="alwaysshowcontainer" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
|
||||
<label for="alwaysshowcontainer">Always Show Container</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="header">Set Header</label>
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHeader();"><br>
|
||||
<textarea id="header" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="body">Set Body</label>
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateBody();"><br>
|
||||
<textarea id="body" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="footer">Set Footer</label>
|
||||
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateFooter();"><br>
|
||||
<textarea id="footer" cols="25" rows="5"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Panel ends -->
|
||||
<!-- 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/connection/connection.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 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACCustomizable = function(){
|
||||
var mylogreader, mylogwriter;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogreader = new YAHOO.widget.LogReader("logger");
|
||||
mylogwriter = new YAHOO.widget.LogWriter("Custom configs");
|
||||
|
||||
// DataSource 1
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
|
||||
// This is the one non-default value other than constructor params
|
||||
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
|
||||
|
||||
// AutoComplete 1
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('custominput','customcontainer', oACDS);
|
||||
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
|
||||
oAutoComp.useIFrame = true;
|
||||
YAHOO.util.Dom.get("useiframe").checked = true;
|
||||
}
|
||||
},
|
||||
|
||||
toggleAnimHoriz: function(animHoriz) {
|
||||
oAutoComp.animHoriz = animHoriz.checked;
|
||||
mylogwriter.log("Updated animHoriz to " + oAutoComp.animHoriz + ".");
|
||||
},
|
||||
|
||||
toggleAnimVert: function(animVert) {
|
||||
oAutoComp.animVert = animVert.checked;
|
||||
mylogwriter.log("Updated animVert to " + oAutoComp.animVert + ".");
|
||||
},
|
||||
|
||||
updateAnimSpeed: function() {
|
||||
var animSpeed = document.getElementById("animspeed").value;
|
||||
if (isNaN(animSpeed) || (animSpeed < 1)) {
|
||||
document.getElementById("animspeed").value = oAutoComp.animSpeed;
|
||||
mylogwriter.log("Could not update animSpeed.", "warn");
|
||||
return;
|
||||
}
|
||||
else {
|
||||
oAutoComp.animSpeed = animSpeed;
|
||||
mylogwriter.log("Updated animSpeed to " + oAutoComp.animSpeed + ".");
|
||||
}
|
||||
},
|
||||
|
||||
toggleShadow: function(useShadow) {
|
||||
oAutoComp.useShadow = useShadow.checked;
|
||||
mylogwriter.log("Updated useShadow to " + oAutoComp.useShadow + ".");
|
||||
},
|
||||
|
||||
toggleIFrame: function(useIFrame) {
|
||||
oAutoComp.useIFrame = useIFrame.checked;
|
||||
mylogwriter.log("Updated useIFrame to " + oAutoComp.useIFrame + ".");
|
||||
},
|
||||
|
||||
toggleTypeAhead: function(typeAhead) {
|
||||
oAutoComp.typeAhead = typeAhead.checked;
|
||||
mylogwriter.log("Updated typeAhead to " + oAutoComp.typeAhead + ".");
|
||||
},
|
||||
|
||||
toggleForceSelection: function(forceSelection) {
|
||||
oAutoComp.forceSelection = forceSelection.checked;
|
||||
oAutoComp.forceSelection = forceSelection.checked;
|
||||
mylogwriter.log("Updated forceSelection to " + oAutoComp.forceSelection + ".");
|
||||
},
|
||||
|
||||
updateMaxResults: function() {
|
||||
var maxResults = document.getElementById("maxresults").value;
|
||||
if (isNaN(maxResults) || (maxResults < 1)) {
|
||||
document.getElementById("maxresults").value = oAutoComp.maxResultsDisplayed;
|
||||
mylogwriter.log("Could not update maxResultsDisplayed.", "warn");
|
||||
return;
|
||||
}
|
||||
else {
|
||||
oAutoComp.maxResultsDisplayed = maxResults;
|
||||
mylogwriter.log("Updated maxResultsDisplayed to " + oAutoComp.maxResultsDisplayed + ".");
|
||||
}
|
||||
},
|
||||
|
||||
updateMinQueryLength: function() {
|
||||
var minQueryLength = document.getElementById("minquerylength").value;
|
||||
if (isNaN(minQueryLength) || (minQueryLength < 1)) {
|
||||
document.getElementById("minquerylength").value = oAutoComp.minQueryLength;
|
||||
mylogwriter.log("Could not update minQueryLength.", "warn");
|
||||
return;
|
||||
}
|
||||
else {
|
||||
oAutoComp.minQueryLength = minQueryLength;
|
||||
mylogwriter.log("Updated minQueryLength to " + oAutoComp.minQueryLength + ".");
|
||||
}
|
||||
},
|
||||
|
||||
updateQueryDelay: function() {
|
||||
var queryDelay = document.getElementById("querydelay").value;
|
||||
if (isNaN(queryDelay) || (queryDelay < 0)) {
|
||||
document.getElementById("querydelay").value = oAutoComp.queryDelay;
|
||||
mylogwriter.log("Could not update queryDelay.", "warn");
|
||||
return;
|
||||
}
|
||||
else {
|
||||
oAutoComp.queryDelay = queryDelay;
|
||||
mylogwriter.log("Updated query delay to " + oAutoComp.queryDelay + ".");
|
||||
}
|
||||
},
|
||||
|
||||
updateDelimChar: function() {
|
||||
var sValue = document.getElementById("delimchar").value;
|
||||
if((sValue.indexOf("[") == 0) && (sValue.indexOf("]") == sValue.length-1)) {
|
||||
oAutoComp.delimChar = eval(sValue);
|
||||
}
|
||||
else if(sValue.length < 2){
|
||||
oAutoComp.delimChar = sValue;
|
||||
}
|
||||
else {
|
||||
document.getElementById("delimchar").value = oAutoComp.delimChar;
|
||||
mylogwriter.log("Could not update delimChar.", "warn");
|
||||
return;
|
||||
}
|
||||
mylogwriter.log("Updated delimChar to " + oAutoComp.delimChar + ".");
|
||||
},
|
||||
|
||||
updateHighlight: function() {
|
||||
oAutoComp.highlightClassName = document.getElementById("highlightclass").value;
|
||||
mylogwriter.log("Updated highlightClassName to " + oAutoComp.highlightClassName + ".");
|
||||
},
|
||||
|
||||
updatePrehighlight: function() {
|
||||
oAutoComp.prehighlightClassName = document.getElementById("prehighlightclass").value;
|
||||
mylogwriter.log("Updated prehighlightClassName to " + oAutoComp.prehighlightClassName + ".");
|
||||
},
|
||||
|
||||
toggleAllowBrowserAutocomplete: function(allowBrowserAutocomplete) {
|
||||
oAutoComp.allowBrowserAutocomplete = allowBrowserAutocomplete.checked;
|
||||
mylogwriter.log("Updated allowBrowserAutocomplete to " + oAutoComp.allowBrowserAutocomplete + ".");
|
||||
},
|
||||
|
||||
toggleAlwaysShowContainer: function(alwaysShowContainer) {
|
||||
var container = YAHOO.util.Dom.getElementsByClassName("yui-ac-content","div","customcontainer")[0];
|
||||
if(container) {
|
||||
oAutoComp.alwaysShowContainer = alwaysShowContainer.checked;
|
||||
if(oAutoComp.alwaysShowContainer) {
|
||||
oAutoComp.setBody("alwaysShowContainer enabled");
|
||||
}
|
||||
else {
|
||||
container.style.height = "0";
|
||||
oAutoComp.setBody();
|
||||
}
|
||||
mylogwriter.log("Updated alwaysShowContainer to " + oAutoComp.alwaysShowContainer + ".");
|
||||
}
|
||||
else {
|
||||
mylogwriter.log("Could not update alwaysShowContainer.","warn");
|
||||
}
|
||||
},
|
||||
|
||||
updateHeader: function() {
|
||||
var header = document.getElementById("header").value;
|
||||
oAutoComp.setHeader(header);
|
||||
mylogwriter.log("Header updated.");
|
||||
},
|
||||
|
||||
updateBody: function() {
|
||||
var body = document.getElementById("body").value;
|
||||
oAutoComp.setBody(body);
|
||||
mylogwriter.log("Body updated.");
|
||||
},
|
||||
|
||||
updateFooter: function() {
|
||||
var footer = document.getElementById("footer").value;
|
||||
oAutoComp.setFooter(footer);
|
||||
mylogwriter.log("Footer updated.");
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return true;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACCustomizable.init);
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Customized XML Implementation</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">
|
||||
#flickrmod {position:relative;padding:1em;}
|
||||
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
||||
#flickrinput {position:absolute;width:100%;height:1.4em;}
|
||||
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
|
||||
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
|
||||
#flickrcontainer ul {padding:5px 0;width:100%;}
|
||||
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#flickrcontainer 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> :: XML Data Flickr Web Services</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<h3>DataSource</h3>
|
||||
<p>This DataSource instance points to Flickr Web Services, via a simple PHP
|
||||
proxy. The DataSource schema is defined for XML data. In order to be
|
||||
compatible with the Flickr application, the scriptQueryParameter has been
|
||||
customized to be "tags", and scriptQueryAppend has been defined to pass in
|
||||
additional arguments. Finally, the cache has been disabled so that each
|
||||
query is forced to make a trip to the live source.</p>
|
||||
|
||||
<h3>AutoComplete</h3>
|
||||
<p>This AutoComplete instance defines a robust formatResult() function that
|
||||
formats the result data into HTML markup that displays an image from Flickr
|
||||
and its title. The autoHighlight feature has additionally been disabled.</p>
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="flickrmod">
|
||||
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
|
||||
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
|
||||
<div id="flickrautocomplete">
|
||||
<input id="flickrinput">
|
||||
<div id="flickrcontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#flickrmod {position:relative;padding:1em;}
|
||||
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
||||
#flickrinput {position:absolute;width:100%;height:1.4em;}
|
||||
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
|
||||
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
|
||||
#flickrcontainer ul {padding:5px 0;width:100%;}
|
||||
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="flickrmod">
|
||||
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
|
||||
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
|
||||
<div id="flickrautocomplete">
|
||||
<input id="flickrinput">
|
||||
<div id="flickrcontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["ResultNodeName",
|
||||
// "QueryKeyAttributeOrNodeName",
|
||||
// "AdditionalParamAttributeOrNodeName1",
|
||||
// ...
|
||||
// "AdditionalParamAttributeOrNodeNameN"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
|
||||
["photo", "title", "id", "owner", "secret", "server"]);
|
||||
oACDS.scriptQueryParam = "tags";
|
||||
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
|
||||
oACDS.maxCacheEntries = 0;
|
||||
oACDS.scriptQueryAppend = "method=flickr.photos.search";
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
|
||||
oAutoComp.autoHighlight = false;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
// This was defined by the schema array of the data source
|
||||
var sTitle = oResultItem[0];
|
||||
var sId = oResultItem[1];
|
||||
var sOwner = oResultItem[2];
|
||||
var sSecret = oResultItem[3];
|
||||
var sServer = oResultItem[4];
|
||||
var sUrl = "http://static.flickr.com/" +
|
||||
sServer +
|
||||
"/" +
|
||||
sId +
|
||||
"_" +
|
||||
sSecret +
|
||||
"_s.jpg";
|
||||
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
|
||||
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/connection/connection.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 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACFlickr = function() {
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["ResultNodeName",
|
||||
// "QueryKeyAttributeOrNodeName",
|
||||
// "AdditionalParamAttributeOrNodeName1",
|
||||
// ...
|
||||
// "AdditionalParamAttributeOrNodeNameN"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
|
||||
["photo", "title", "id", "owner", "secret", "server"]);
|
||||
oACDS.scriptQueryParam = "tags";
|
||||
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
|
||||
oACDS.maxCacheEntries = 0;
|
||||
oACDS.scriptQueryAppend = "method=flickr.photos.search";
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
|
||||
oAutoComp.autoHighlight = false;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
// This was defined by the schema array of the data source
|
||||
var sTitle = oResultItem[0];
|
||||
var sId = oResultItem[1];
|
||||
var sOwner = oResultItem[2];
|
||||
var sSecret = oResultItem[3];
|
||||
var sServer = oResultItem[4];
|
||||
var sUrl = "http://static.flickr.com/" +
|
||||
sServer +
|
||||
"/" +
|
||||
sId +
|
||||
"_" +
|
||||
sSecret +
|
||||
"_s.jpg";
|
||||
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
|
||||
return (sMarkup);
|
||||
};
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlickr.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Implementation Examples</title>
|
||||
<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/examples.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
ul {margin:1em;}
|
||||
li {margin:1em;list-style-type:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/>AutoComplete Widget :: JSON Data Yahoo! Search Web Services</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<ul>
|
||||
<li><a href="./ysearch_json.html">Query Yahoo! Search web services for JSON</a></li>
|
||||
<li><a href="./ysearch_xml.html">Query Yahoo! Search web wervices for XML</a></li>
|
||||
<li><a href="./states_jsarray.html">Query a JS array for in-memory data</a></li>
|
||||
<li><a href="./states_jsfunction.html">Query a JS function for in-memory data</a></li>
|
||||
<li><a href="./flickr_xml.html">Query Flickr web services for XML</a></li>
|
||||
<li><a href="./ysearch_flat.html">Query a custom PHP script for flat data</a></li>
|
||||
<li><a href="./customize.html">Configure your own AutoComplete component</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
150
www/extras/yui/examples/autocomplete/js/json.js
vendored
150
www/extras/yui/examples/autocomplete/js/json.js
vendored
|
|
@ -1,150 +0,0 @@
|
|||
/*
|
||||
Copyright (c) 2005 JSON.org
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The Software shall be used for Good, not Evil.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
The global object JSON contains two methods.
|
||||
|
||||
JSON.stringify(value) takes a JavaScript value and produces a JSON text.
|
||||
The value must not be cyclical.
|
||||
|
||||
JSON.parse(text) takes a JSON text and produces a JavaScript value. It will
|
||||
throw a 'JSONError' exception if there is an error.
|
||||
*/
|
||||
var JSON = {
|
||||
copyright: '(c)2005 JSON.org',
|
||||
license: 'http://www.crockford.com/JSON/license.html',
|
||||
/*
|
||||
Stringify a JavaScript value, producing a JSON text.
|
||||
*/
|
||||
stringify: function (v) {
|
||||
var a = [];
|
||||
|
||||
/*
|
||||
Emit a string.
|
||||
*/
|
||||
function e(s) {
|
||||
a[a.length] = s;
|
||||
}
|
||||
|
||||
/*
|
||||
Convert a value.
|
||||
*/
|
||||
function g(x) {
|
||||
var c, i, l, v;
|
||||
|
||||
switch (typeof x) {
|
||||
case 'object':
|
||||
if (x) {
|
||||
if (x instanceof Array) {
|
||||
e('[');
|
||||
l = a.length;
|
||||
for (i = 0; i < x.length; i += 1) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function') {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
e(']');
|
||||
return;
|
||||
} else if (typeof x.valueOf == 'function') {
|
||||
e('{');
|
||||
l = a.length;
|
||||
for (i in x) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function' &&
|
||||
(!v || typeof v != 'object' ||
|
||||
typeof v.valueOf == 'function')) {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(i);
|
||||
e(':');
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
return e('}');
|
||||
}
|
||||
}
|
||||
e('null');
|
||||
return;
|
||||
case 'number':
|
||||
e(isFinite(x) ? +x : 'null');
|
||||
return;
|
||||
case 'string':
|
||||
l = x.length;
|
||||
e('"');
|
||||
for (i = 0; i < l; i += 1) {
|
||||
c = x.charAt(i);
|
||||
if (c >= ' ') {
|
||||
if (c == '\\' || c == '"') {
|
||||
e('\\');
|
||||
}
|
||||
e(c);
|
||||
} else {
|
||||
switch (c) {
|
||||
case '\b':
|
||||
e('\\b');
|
||||
break;
|
||||
case '\f':
|
||||
e('\\f');
|
||||
break;
|
||||
case '\n':
|
||||
e('\\n');
|
||||
break;
|
||||
case '\r':
|
||||
e('\\r');
|
||||
break;
|
||||
case '\t':
|
||||
e('\\t');
|
||||
break;
|
||||
default:
|
||||
c = c.charCodeAt();
|
||||
e('\\u00' + Math.floor(c / 16).toString(16) +
|
||||
(c % 16).toString(16));
|
||||
}
|
||||
}
|
||||
}
|
||||
e('"');
|
||||
return;
|
||||
case 'boolean':
|
||||
e(String(x));
|
||||
return;
|
||||
default:
|
||||
e('null');
|
||||
return;
|
||||
}
|
||||
}
|
||||
g(v);
|
||||
return a.join('');
|
||||
},
|
||||
/*
|
||||
Parse a JSON text, producing a JavaScript value.
|
||||
*/
|
||||
parse: function (text) {
|
||||
return (/^(\s+|[,:{}\[\]]|"(\\["\\\/bfnrtu]|[^\x00-\x1f"\\]+)*"|-?\d+(\.\d*)?([eE][+-]?\d+)?|true|false|null)+$/.test(text)) &&
|
||||
eval('(' + text + ')');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
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; }
|
||||
}
|
||||
//{"STATE" : "", "ABBR" : ""}
|
||||
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"}],
|
||||
'd' : [
|
||||
{"STATE" : "Delaware", "ABBR" : "DE"}],
|
||||
'e' : [
|
||||
],
|
||||
'f' : [
|
||||
{"STATE" : "Florida", "ABBR" : "FL"}],
|
||||
'g' : [
|
||||
{"STATE" : "Georgia", "ABBR" : "GA"}],
|
||||
'h' : [
|
||||
{"STATE" : "Hawaii", "ABBR" : "HI"}],
|
||||
'i' : [
|
||||
{"STATE" : "Idaho", "ABBR" : "ID"},
|
||||
{"STATE" : "Illinois", "ABBR" : "IL"},
|
||||
{"STATE" : "Indiana", "ABBR" : "IN"},
|
||||
{"STATE" : "Iowa", "ABBR" : "IA"}],
|
||||
'j' : [
|
||||
],
|
||||
'k' : [
|
||||
{"STATE" : "Kansas", "ABBR" : "KS"},
|
||||
{"STATE" : "Kentucky", "ABBR" : "KY"}],
|
||||
'l' : [
|
||||
{"STATE" : "Louisiana", "ABBR" : "LA"}],
|
||||
'm' : [
|
||||
{"STATE" : "Maine", "ABBR" : "ME"},
|
||||
{"STATE" : "Maryland", "ABBR" : "MD"},
|
||||
{"STATE" : "Massachusetts", "ABBR" : "MA"},
|
||||
{"STATE" : "Michigan", "ABBR" : "MI"},
|
||||
{"STATE" : "Minnesota", "ABBR" : "MN"},
|
||||
{"STATE" : "Mississippi", "ABBR" : "MS"},
|
||||
{"STATE" : "Missouri", "ABBR" : "MO"},
|
||||
{"STATE" : "Montana", "ABBR" : "MT"}],
|
||||
'n' : [
|
||||
{"STATE" : "Nebraska", "ABBR" : "NE"},
|
||||
{"STATE" : "Nevada", "ABBR" : "NV"},
|
||||
{"STATE" : "New Hampshire", "ABBR" : "NH"},
|
||||
{"STATE" : "New Jersey", "ABBR" : "NJ"},
|
||||
{"STATE" : "New Mexico", "ABBR" : "NM"},
|
||||
{"STATE" : "New York", "ABBR" : "NY"},
|
||||
{"STATE" : "North Dakota", "ABBR" : "ND"},
|
||||
{"STATE" : "North Carolina", "ABBR" : "NC"}],
|
||||
'o' : [
|
||||
{"STATE" : "Ohio", "ABBR" : "OH"},
|
||||
{"STATE" : "Oklahoma", "ABBR" : "OK"},
|
||||
{"STATE" : "Oregon", "ABBR" : "OR"}],
|
||||
'p' : [
|
||||
{"STATE" : "Pennsylvania", "ABBR" : "PA"}],
|
||||
'q' : [
|
||||
],
|
||||
'r' : [
|
||||
{"STATE" : "Rhode Island", "ABBR" : "RI"}],
|
||||
's' : [
|
||||
{"STATE" : "South Carolina", "ABBR" : "SC"},
|
||||
{"STATE" : "South Dakota", "ABBR" : "SD"}],
|
||||
't' : [
|
||||
{"STATE" : "Tennessee", "ABBR" : "TN"},
|
||||
{"STATE" : "Texas", "ABBR" : "TX"}],
|
||||
'u' : [
|
||||
{"STATE" : "Utah", "ABBR" : "UT"}],
|
||||
'v' : [
|
||||
{"STATE" : "Vermont", "ABBR" : "VT"},
|
||||
{"STATE" : "Virginia", "ABBR" : "VA"}],
|
||||
'w' : [
|
||||
{"STATE" : "Washington", "ABBR" : "WA"},
|
||||
{"STATE" : "West Virginia", "ABBR" : "WV"},
|
||||
{"STATE" : "Wisconsin", "ABBR" : "WI"},
|
||||
{"STATE" : "Wyoming", "ABBR" : "WY"}],
|
||||
'x' : [
|
||||
],
|
||||
'y' : [
|
||||
],
|
||||
'z' : [
|
||||
]
|
||||
};
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<?php
|
||||
// Yahoo! proxy
|
||||
|
||||
// Hard-code hostname and path:
|
||||
define ('PATH', 'http://www.flickr.com/services/rest/');
|
||||
|
||||
// Get all query params
|
||||
$query = "?";
|
||||
foreach ($_GET as $key => $value) {
|
||||
$query .= urlencode($key)."=".urlencode($value)."&";
|
||||
}
|
||||
|
||||
foreach ($_POST as $key => $value) {
|
||||
$query .= $key."=".$value."&";
|
||||
}
|
||||
$query .= "&api_key=30cc0cf363608a1ffa3fc1631854c8b8";
|
||||
$url = PATH.$query;
|
||||
|
||||
// Open the Curl session
|
||||
$session = curl_init($url);
|
||||
|
||||
// Don't return HTTP headers. Do return the contents of the call
|
||||
curl_setopt($session, CURLOPT_HEADER, false);
|
||||
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
// Make the call
|
||||
$response = curl_exec($session);
|
||||
|
||||
header("Content-Type: text/xml");
|
||||
echo $response;
|
||||
curl_close($session);
|
||||
|
||||
?>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,45 +0,0 @@
|
|||
<?php
|
||||
// Yahoo! proxy
|
||||
|
||||
// Hard-code hostname and path:
|
||||
// search = http://api.search.yahoo.com/WebSearchService/V1/webSearch
|
||||
// api.local
|
||||
// api.travel
|
||||
define ('PATH', 'http://api.search.yahoo.com/WebSearchService/V1/webSearch');
|
||||
|
||||
$type = "text/xml";
|
||||
|
||||
// Get all query params
|
||||
$query = "?";
|
||||
foreach ($_GET as $key => $value) {
|
||||
if(($key == "output") && ($value == "json")) {
|
||||
$type = "application/x-javascript";
|
||||
}
|
||||
$query .= urlencode($key)."=".urlencode($value)."&";
|
||||
}
|
||||
|
||||
foreach ($_POST as $key => $value) {
|
||||
if(($key == "output") && ($value == "json")) {
|
||||
$type = "json";
|
||||
}
|
||||
$query .= $key."=".$value."&";
|
||||
}
|
||||
$query .= "appid=jennyhan_ac";
|
||||
$url = PATH.$query;
|
||||
|
||||
|
||||
// Open the Curl session
|
||||
$session = curl_init($url);
|
||||
|
||||
// Don't return HTTP headers. Do return the contents of the call
|
||||
curl_setopt($session, CURLOPT_HEADER, false);
|
||||
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
// Make the call
|
||||
$response = curl_exec($session);
|
||||
|
||||
header("Content-Type: ".$type);
|
||||
echo $response;
|
||||
curl_close($session);
|
||||
|
||||
?>
|
||||
|
|
@ -1,675 +0,0 @@
|
|||
<!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="./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>
|
||||
|
|
@ -1,273 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,281 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Complex Flat-data Implementation</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">
|
||||
#ysearchmod {position:relative;padding:1em;}
|
||||
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
|
||||
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
|
||||
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
|
||||
#ysearchinput0, #ysearchinput1, #ysearchinput2 {position:absolute;width:100%;height:1.4em;}
|
||||
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
|
||||
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
|
||||
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
|
||||
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
|
||||
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
|
||||
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat Data Custom Script</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<h3>DataSource</h3>
|
||||
<p>This DataSource instance points to a custom PHP script that returns flat
|
||||
demo data of recent search terms and number of results. The schema has
|
||||
been defined to parse tab-delimited data rows that are separated by line
|
||||
breaks. For maximum cache usage, the DataSource has been
|
||||
configured to match query subsets in the cache, and the cache itself has
|
||||
been turned up to 60 entries for fewer round trips to the server.
|
||||
</p>
|
||||
|
||||
<h3>AutoComplete</h3>
|
||||
<p>Three AutoComplete instances are created that all point the a single
|
||||
DataSource for maximimum cache efficiency. Queries can be delimited using
|
||||
the semi-colon (;) character. For demonstration purposes, each instance
|
||||
decreases the query delay slightly, and each instance presents the return
|
||||
data in the container in a slightly different way.</p>
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
|
||||
<h2>Yahoo! Search (1 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete0">
|
||||
<input id="ysearchinput0">
|
||||
<div id="ysearchcontainer0"></div>
|
||||
</div>
|
||||
<h2>Yahoo! Search (0.5 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete1">
|
||||
<input id="ysearchinput1">
|
||||
<div id="ysearchcontainer1"></div>
|
||||
</div>
|
||||
<h2>Yahoo! Search (0 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete2">
|
||||
<input id="ysearchinput2">
|
||||
<div id="ysearchcontainer2"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#ysearchmod {position:relative;padding:1em;}
|
||||
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
|
||||
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
|
||||
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
|
||||
#ysearchinput0, #ysearchinput1, #ysearchinput2 {position:absolute;width:100%;height:1.4em;}
|
||||
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
|
||||
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
|
||||
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
|
||||
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
|
||||
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
|
||||
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
|
||||
<h2>Yahoo! Search (1 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete0">
|
||||
<input id="ysearchinput0">
|
||||
<div id="ysearchcontainer0"></div>
|
||||
</div>
|
||||
<h2>Yahoo! Search (0.5 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete1">
|
||||
<input id="ysearchinput1">
|
||||
<div id="ysearchcontainer1"></div>
|
||||
</div>
|
||||
<h2>Yahoo! Search (0 sec query delay):</h2>
|
||||
<div id="ysearchautocomplete2">
|
||||
<input id="ysearchinput2">
|
||||
<div id="ysearchcontainer2"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Instantiate one XHR DataSource and define schema as an array:
|
||||
// ["Record Delimiter",
|
||||
// "Field Delimiter"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
|
||||
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
|
||||
oACDS.maxCacheEntries = 60;
|
||||
oACDS.queryMatchSubset = true;
|
||||
|
||||
// Instantiate first AutoComplete
|
||||
var myInput = document.getElementById('ysearchinput0');
|
||||
var myContainer = document.getElementById('ysearchcontainer0');
|
||||
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
|
||||
oAutoComp0.delimChar = ";";
|
||||
oAutoComp0.queryDelay = 1;
|
||||
oAutoComp0.formatResult = function(oResultItem, sQuery) {
|
||||
var sKey = oResultItem[0];
|
||||
var nQuantity = oResultItem[1];
|
||||
var sKeyQuery = sKey.substr(0, sQuery.length);
|
||||
var sKeyRemainder = sKey.substr(sQuery.length);
|
||||
var aMarkup = ["<div id='ysearchresult'><div class='ysearchquery'>",
|
||||
nQuantity,
|
||||
"</div><span style='font-weight:bold'>",
|
||||
sKeyQuery,
|
||||
"</span>",
|
||||
sKeyRemainder,
|
||||
"</div>"];
|
||||
return (aMarkup.join(""));
|
||||
};
|
||||
|
||||
// Instantiate second AutoComplete
|
||||
oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
|
||||
oAutoComp1.delimChar = ";";
|
||||
oAutoComp1.formatResult = function(oResultItem, sQuery) {
|
||||
var sKey = oResultItem[0];
|
||||
var nQuantity = oResultItem[1];
|
||||
var sKeyQuery = sKey.substr(0, sQuery.length);
|
||||
var sKeyRemainder = sKey.substr(sQuery.length);
|
||||
var aMarkup = ["<div class='ysearchresult'><div class='ysearchquery'>",
|
||||
nQuantity,
|
||||
"</div><span style='color:red'>",
|
||||
sKeyQuery,
|
||||
"</span>",
|
||||
sKeyRemainder,
|
||||
"</div>"];
|
||||
return (aMarkup.join(""));
|
||||
};
|
||||
|
||||
// Instantiate third AutoComplete
|
||||
oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
|
||||
oAutoComp2.delimChar = ";";
|
||||
oAutoComp2.queryDelay = 0;
|
||||
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
|
||||
</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/connection/connection.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 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACFlatData = function(){
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp0,oAutoComp1,oAutoComp2;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate one XHR DataSource and define schema as an array:
|
||||
// ["Record Delimiter",
|
||||
// "Field Delimiter"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
|
||||
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
|
||||
oACDS.maxCacheEntries = 60;
|
||||
oACDS.queryMatchSubset = true;
|
||||
|
||||
// Instantiate first AutoComplete
|
||||
var myInput = document.getElementById('ysearchinput0');
|
||||
var myContainer = document.getElementById('ysearchcontainer0');
|
||||
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
|
||||
oAutoComp0.delimChar = ";";
|
||||
oAutoComp0.queryDelay = 1;
|
||||
oAutoComp0.formatResult = function(oResultItem, sQuery) {
|
||||
var sKey = oResultItem[0];
|
||||
var nQuantity = oResultItem[1];
|
||||
var sKeyQuery = sKey.substr(0, sQuery.length);
|
||||
var sKeyRemainder = sKey.substr(sQuery.length);
|
||||
var aMarkup = ["<div id='ysearchresult'><div class='ysearchquery'>",
|
||||
nQuantity,
|
||||
"</div><span style='font-weight:bold'>",
|
||||
sKeyQuery,
|
||||
"</span>",
|
||||
sKeyRemainder,
|
||||
"</div>"];
|
||||
return (aMarkup.join(""));
|
||||
};
|
||||
|
||||
// Instantiate second AutoComplete
|
||||
oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
|
||||
oAutoComp1.delimChar = ";";
|
||||
oAutoComp1.formatResult = function(oResultItem, sQuery) {
|
||||
var sKey = oResultItem[0];
|
||||
var nQuantity = oResultItem[1];
|
||||
var sKeyQuery = sKey.substr(0, sQuery.length);
|
||||
var sKeyRemainder = sKey.substr(sQuery.length);
|
||||
var aMarkup = ["<div class='ysearchresult'><div class='ysearchquery'>",
|
||||
nQuantity,
|
||||
"</div><span style='color:red'>",
|
||||
sKeyQuery,
|
||||
"</span>",
|
||||
sKeyRemainder,
|
||||
"</div>"];
|
||||
return (aMarkup.join(""));
|
||||
};
|
||||
|
||||
// Instantiate third AutoComplete
|
||||
oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
|
||||
oAutoComp2.delimChar = ";";
|
||||
oAutoComp2.queryDelay = 0;
|
||||
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Basic JSON Implementation</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">
|
||||
#ysearchmod {position:relative;text-align:center;z-index:9050;}
|
||||
#ysearchautocomplete {position:relative;}
|
||||
#ysearchinput {position:relative;width:20em;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
|
||||
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
|
||||
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
|
||||
#ysearchsubmit {position:relative;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
|
||||
<span>Yahoo! Search</span>
|
||||
<span id="ysearchautocomplete">
|
||||
<input id="ysearchinput">
|
||||
<div id="ysearchcontainer"></div>
|
||||
</span>
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<h3>DataSource</h3>
|
||||
<p>This DataSource instance points to Yahoo! Search Web Services, via a
|
||||
simple PHP proxy. The DataSource schema is defined for JSON data. In order
|
||||
to be compatible with the Yahoo! Search application, the DataSource's
|
||||
queryMatchContains is set to true, and the scriptQueryAppend has been
|
||||
defined to pass in additional arguments.</p>
|
||||
|
||||
<h3>AutoComplete</h3>
|
||||
<p>This AutoComplete instance uses only default configuration values.</p>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#ysearchmod {position:relative;text-align:center;z-index:9050;}
|
||||
#ysearchautocomplete {position:relative;}
|
||||
#ysearchinput {position:relative;width:20em;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
|
||||
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
|
||||
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
|
||||
#ysearchsubmit {position:relative;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
|
||||
<span>Yahoo! Search</span>
|
||||
<span id="ysearchautocomplete">
|
||||
<input id="ysearchinput">
|
||||
<div id="ysearchcontainer"></div>
|
||||
</span>
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["Multi-depth.object.notation.to.find.a.single.result.item",
|
||||
// "Query Key",
|
||||
// "Additional Param Name 1",
|
||||
// ...
|
||||
// "Additional Param Name n"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["ResultSet.Result", "Title", "Summary", "Cache"]);
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
</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/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
<script type="text/javascript" src="./js/json.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 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACJson = function(){
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
// Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["Multi-depth.object.notation.to.find.a.single.result.item",
|
||||
// "Query Key",
|
||||
// "Additional Param Name 1",
|
||||
// ...
|
||||
// "Additional Param Name n"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["ResultSet.Result", "Title", "Summary", "Cache"]);
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoComplete Widget :: Basic XML Implementation</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">
|
||||
#ysearchmod {position:relative;padding:1em;}
|
||||
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
||||
#ysearchinput {position:absolute;width:100%;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer 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> :: XML Data Yahoo! Search Web Services</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<h3>DataSource</h3>
|
||||
<p>This DataSource instance points to Yahoo! Search Web Services, via a
|
||||
simple PHP proxy. The DataSource schema is defined for XML data. In order
|
||||
to be compatible with the Yahoo! Search application, the DataSource's
|
||||
queryMatchContains is set to true, and the scriptQueryAppend has been
|
||||
defined to pass in additional arguments.</p>
|
||||
|
||||
<h3>AutoComplete</h3>
|
||||
<p>This AutoComplete instance uses only default configuration values.</p>
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
|
||||
<h2>Yahoo! Search</h2>
|
||||
<div id="ysearchautocomplete">
|
||||
<input id="ysearchinput">
|
||||
<div id="ysearchcontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#ysearchmod {position:relative;padding:1em;}
|
||||
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
||||
#ysearchinput {position:absolute;width:100%;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
|
||||
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
|
||||
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
||||
#ysearchcontainer ul {padding:5px 0;width:100%;}
|
||||
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
||||
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
|
||||
<h2>Yahoo! Search</h2>
|
||||
<div id="ysearchautocomplete">
|
||||
<input id="ysearchinput">
|
||||
<div id="ysearchcontainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["Multi-depth.object.notation.to.find.a.single.result.item",
|
||||
// "Query Key",
|
||||
// "Additional Param Name 1",
|
||||
// ...
|
||||
// "Additional Param Name n"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
|
||||
oACDS.responseType = oACDS.TYPE_XML;
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
</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/connection/connection.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 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.ACXml = function(){
|
||||
var mylogger;
|
||||
var oACDS;
|
||||
var oAutoComp;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
//Logger
|
||||
mylogger = new YAHOO.widget.LogReader("logger");
|
||||
|
||||
// Instantiate an XHR DataSource and define schema as an array:
|
||||
// ["Multi-depth.object.notation.to.find.a.single.result.item",
|
||||
// "Query Key",
|
||||
// "Additional Param Name 1",
|
||||
// ...
|
||||
// "Additional Param Name n"]
|
||||
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
|
||||
oACDS.responseType = oACDS.TYPE_XML;
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACXml.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