180 lines
8 KiB
HTML
180 lines
8 KiB
HTML
<!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>
|