upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
24
www/extras/yui/examples/autocomplete/css/examples.css
Normal file
24
www/extras/yui/examples/autocomplete/css/examples.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
h1 {font-size:144%;}
|
||||
h2 {font-size:129%;}
|
||||
h3 {font-size:114%;}
|
||||
h4 {font-size:100%;}
|
||||
h1,h2,h3,h4 {font-weight:bold;}
|
||||
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;}
|
||||
350
www/extras/yui/examples/autocomplete/customize.html
Normal file
350
www/extras/yui/examples/autocomplete/customize.html
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - Configurations Dashboard (YUI Library)</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> :: Configurations Dashboard</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>In this example, an AutoComplete instance is created that points to the
|
||||
same DataSource as the <a href="./ysearch_flat.html">Flat-file Data</a>
|
||||
example. However, by changing the values below, you can easily customize the
|
||||
configuration properties of the implementation.
|
||||
</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" type="text" name="query">
|
||||
<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.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)) {
|
||||
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>
|
||||
210
www/extras/yui/examples/autocomplete/flickr_xml.html
Normal file
210
www/extras/yui/examples/autocomplete/flickr_xml.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - Flickr XML (YUI Library)</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="../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> :: Flickr XML</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<p>This example uses a DataSource that points to Flickr Web
|
||||
Services, which returns XML data via a simple PHP proxy. In order to return
|
||||
valid data from the Flickr application, <code>scriptQueryParameter</code>
|
||||
has been customized to be <code>"tags"</code>, and <code>scriptQueryAppend</code> is used
|
||||
to pass in additional required arguments. The cache has been disabled so
|
||||
that each query is forced to make a trip to the live application.</p>
|
||||
|
||||
<p>This instance of AutoComplete defines a robust custom
|
||||
<code>formatResult</code> function that parses result data into custom HTML
|
||||
markup that displays an actual image from the Flickr server. Automatic
|
||||
highlighting of the first result item in the container has been disabled by
|
||||
setting <code>autoHighlight</code> to <code>false</code>.</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.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.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="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
www/extras/yui/examples/autocomplete/img/logo.gif
Normal file
BIN
www/extras/yui/examples/autocomplete/img/logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
32
www/extras/yui/examples/autocomplete/index.html
Normal file
32
www/extras/yui/examples/autocomplete/index.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Examples: AutoComplete (YUI Library)</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 Implementation Examples</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<ul>
|
||||
<li><a href="./ysearch_json.html">Query Yahoo! Search web services for JSON data</a></li>
|
||||
<li><a href="./ysearch_xml.html">Query Yahoo! Search web wervices for XML data</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 data</a></li>
|
||||
<li><a href="./ysearch_flat.html">Query a custom PHP script for flat-file 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
Normal file
150
www/extras/yui/examples/autocomplete/js/json.js
vendored
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
/*
|
||||
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 + ')');
|
||||
}
|
||||
};
|
||||
116
www/extras/yui/examples/autocomplete/js/states_jsfunction.js
vendored
Normal file
116
www/extras/yui/examples/autocomplete/js/states_jsfunction.js
vendored
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
function getStates(sQuery) {
|
||||
aResults = [];
|
||||
if(sQuery && 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;
|
||||
}
|
||||
}
|
||||
// Empty queries return all states
|
||||
else {
|
||||
for(var letter in dataset) {
|
||||
var oResponse = dataset[letter];
|
||||
for(var i = oResponse.length-1; i >= 0; i--) {
|
||||
aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
|
||||
}
|
||||
}
|
||||
return aResults;
|
||||
}
|
||||
}
|
||||
//{"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' : [
|
||||
]
|
||||
};
|
||||
33
www/extras/yui/examples/autocomplete/php/flickr_proxy.php
Normal file
33
www/extras/yui/examples/autocomplete/php/flickr_proxy.php
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?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);
|
||||
|
||||
?>
|
||||
44109
www/extras/yui/examples/autocomplete/php/ysearch_flat.php
Normal file
44109
www/extras/yui/examples/autocomplete/php/ysearch_flat.php
Normal file
File diff suppressed because it is too large
Load diff
45
www/extras/yui/examples/autocomplete/php/ysearch_proxy.php
Normal file
45
www/extras/yui/examples/autocomplete/php/ysearch_proxy.php
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<?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/json";
|
||||
}
|
||||
$query .= urlencode($key)."=".urlencode($value)."&";
|
||||
}
|
||||
|
||||
foreach ($_POST as $key => $value) {
|
||||
if(($key == "output") && ($value == "json")) {
|
||||
$type = "application/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);
|
||||
|
||||
?>
|
||||
672
www/extras/yui/examples/autocomplete/states_jsarray.html
Normal file
672
www/extras/yui/examples/autocomplete/states_jsarray.html
Normal file
|
|
@ -0,0 +1,672 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - JavaScript Array (YUI Library)</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="../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 {_position:absolute;width:100%;height:1.4em;z-index:0;} /* abs for ie quirks */
|
||||
#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 -->
|
||||
<p>There are two AutoComplete widgets on this page that each point to a
|
||||
different DS_JSArray DataSource instance. Driving each DataSource is a local
|
||||
JavaScript array of strings: <code>statesArray</code> and <code>areaCodesArray</code>.
|
||||
By pointing to arrays that are already loaded into memory the widget is
|
||||
very fast to return data. Therefore, both AutoComplete instances are
|
||||
configured to have a query delay of zero
|
||||
seconds.</p>
|
||||
|
||||
<p>Enabling the
|
||||
<code>prehighlightClassName</code> feature provides supplemental visual
|
||||
feedback for mouse events on results in the container.</p>
|
||||
|
||||
<p>The <code>formatResult</code> method of the second AutoComplete instance
|
||||
has been enhanced to display two data fields in the container, and the
|
||||
<code>forceSelection</code> property 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 {_position:absolute;width:100%;height:1.4em;z-index:0;} /* abs for ie quirks */
|
||||
#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.useShadow = true;
|
||||
oAutoComp.minQueryLength = 0;
|
||||
oAutoComp.textboxFocusEvent.subscribe(function(){oAutoComp.sendQuery("");});
|
||||
|
||||
// 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.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;
|
||||
oAutoComp.minQueryLength = 0;
|
||||
oAutoComp.textboxFocusEvent.subscribe(function(){oAutoComp.sendQuery("");});
|
||||
|
||||
// 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="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
274
www/extras/yui/examples/autocomplete/states_jsfunction.html
Normal file
274
www/extras/yui/examples/autocomplete/states_jsfunction.html
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - JavaScript Function (YUI Library)</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="../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:auto;overflow-x: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 -->
|
||||
<p>This example uses a DS_JSFunction DataSource with a JavaScript function
|
||||
that returns data as an array of strings. Since the data for this example is
|
||||
already loaded into memory, queries should be very fast to return data.
|
||||
Therefore, the AutoComplete instance is configured to have a query delay of
|
||||
zero seconds.</p>
|
||||
|
||||
<p>In this example, the AutoComplete instance is able to keep its container
|
||||
always open by customizing the appropriate CSS styles and enabling the
|
||||
<code>alwaysShowContainer</code> property. Hooking into the custom events
|
||||
<code>containerExpandEvent</code> and <code>containerCollapseEvent</code>
|
||||
and calling the <code>setHeader</code>, <code>setBody</code>, and
|
||||
<code>setFooter</code> methods dynamically updates the contents of the open
|
||||
container.</p>
|
||||
|
||||
<p>The container can be customized to display multiple data fields by
|
||||
customizing the AutoComplete's <code>formatResults</code> method.</p>
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="statesmod">
|
||||
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
|
||||
<h2>Filter the US states:</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:auto;overflow-x: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>Filter the US states:</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 && 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;
|
||||
}
|
||||
}
|
||||
// Empty queries return all states
|
||||
else {
|
||||
for(var letter in dataset) {
|
||||
var oResponse = dataset[letter];
|
||||
for(var i = oResponse.length-1; i >= 0; i--) {
|
||||
aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
|
||||
}
|
||||
}
|
||||
return aResults;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
oACDS.maxCacheEntries = 0;
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
|
||||
oAutoComp.alwaysShowContainer = true;
|
||||
oAutoComp.queryDelay = 0;
|
||||
oAutoComp.minQueryLength = 0;
|
||||
oAutoComp.maxResultsDisplayed = 50;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
|
||||
return (sMarkup);
|
||||
};
|
||||
|
||||
// Subscribe to Custom Events
|
||||
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
|
||||
|
||||
// Set initial content in the container
|
||||
oAutoComp.sendQuery("");
|
||||
},
|
||||
|
||||
// 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>");
|
||||
}
|
||||
},
|
||||
|
||||
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/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);
|
||||
oACDS.maxCacheEntries = 0;
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
|
||||
oAutoComp.alwaysShowContainer = true;
|
||||
oAutoComp.queryDelay = 0;
|
||||
oAutoComp.minQueryLength = 0;
|
||||
oAutoComp.maxResultsDisplayed = 50;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
|
||||
return (sMarkup);
|
||||
};
|
||||
|
||||
// Subscribe to Custom Events
|
||||
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
|
||||
|
||||
// Set initial content in the container
|
||||
oAutoComp.sendQuery("");
|
||||
},
|
||||
|
||||
// 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>");
|
||||
}
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
279
www/extras/yui/examples/autocomplete/ysearch_flat.html
Normal file
279
www/extras/yui/examples/autocomplete/ysearch_flat.html
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - Flat-file Data (YUI Library)</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="../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;} /* abs for ie quirks */
|
||||
#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-file Data</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<p>This example's XHR DataSource instance points to a custom PHP script that
|
||||
returns flat-file data. The DataSource schema is used to parse the tab- and
|
||||
linebreak-delimited data. For maximum cache performance, the
|
||||
<code>queryMatchSubset</code> property has been enabled, and the cache
|
||||
itself has been turned up to 60 entries for fewer round trips to the server.
|
||||
</p>
|
||||
|
||||
<p>On this page there are three separate AutoComplete instances that all
|
||||
point to a single DataSource, which further maximizes 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 using slightly
|
||||
different markup.</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;} /* abs for ie quirks */
|
||||
#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.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.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="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
180
www/extras/yui/examples/autocomplete/ysearch_json.html
Normal file
180
www/extras/yui/examples/autocomplete/ysearch_json.html
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - Basic JSON Data (YUI Library)</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="../assets/dpSyntaxHighlighter.css">
|
||||
|
||||
<style type="text/css">
|
||||
#ysearchmod {text-align:center;}
|
||||
#ysearchinput {width:20em;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;z-index:9050;}
|
||||
#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;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Basic JSON Data</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<!-- AutoComplete begins -->
|
||||
<div id="ysearchmod">
|
||||
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
|
||||
<label>Yahoo! Search</label>
|
||||
<input id="ysearchinput">
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
<div id="ysearchcontainer"></div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- AutoComplete ends -->
|
||||
|
||||
<!-- Logger begins -->
|
||||
<div id="logger"></div>
|
||||
<!-- Logger ends -->
|
||||
|
||||
<!-- Content begins -->
|
||||
<p>This example's DataSource instance points to Yahoo! Search Web Services,
|
||||
which returns JSON data via a simple PHP proxy. The DataSource schema will
|
||||
parse the data found in the object literal for fields named "Title",
|
||||
"Summary", and "Cache". In order for the Yahoo! Search application to return
|
||||
valid data, the DataSource property <code>scriptQueryAppend</code> is used
|
||||
to pass along all the required query parameters, and the property
|
||||
<code>queryMatchContains</code> has been enabled.</p>
|
||||
|
||||
<p>To achieve the shrink-wrapped centered search module, not only have custom CSS
|
||||
been applied, but the the <code>doBeforeExpandContainer</code> method has also been
|
||||
customized to position the container directly below the input field.
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
#ysearchmod {text-align:center;}
|
||||
#ysearchinput {width:20em;height:1.4em;}
|
||||
#ysearchcontainer {position:absolute;z-index:9050;}
|
||||
#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;}
|
||||
</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();">
|
||||
<label>Yahoo! Search</label>
|
||||
<input id="ysearchinput">
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
<div id="ysearchcontainer"></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", ["ResultSet.Result","Title"]);
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
oAutoComp.useShadow = true;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
|
||||
};
|
||||
oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
|
||||
var pos = YAHOO.util.Dom.getXY(oTextbox);
|
||||
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
|
||||
YAHOO.util.Dom.setXY(oContainer,pos);
|
||||
return true;
|
||||
};
|
||||
</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"]);
|
||||
oACDS.queryMatchContains = true;
|
||||
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
|
||||
|
||||
// Instantiate AutoComplete
|
||||
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
|
||||
oAutoComp.useShadow = true;
|
||||
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
||||
return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
|
||||
};
|
||||
oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
|
||||
var pos = YAHOO.util.Dom.getXY(oTextbox);
|
||||
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
|
||||
YAHOO.util.Dom.setXY(oContainer,pos);
|
||||
return true;
|
||||
};
|
||||
},
|
||||
|
||||
validateForm: function() {
|
||||
// Validate form inputs here
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
164
www/extras/yui/examples/autocomplete/ysearch_xml.html
Normal file
164
www/extras/yui/examples/autocomplete/ysearch_xml.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: AutoComplete - Basic XML Data (YUI Library)</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="../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> :: Basic XML Data</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 = YAHOO.widget.DS_XHR.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 = YAHOO.widget.DS_XHR.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="../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