mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-13 21:13:26 +00:00
161 lines
5.4 KiB
HTML
161 lines
5.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Datatable with Autocomplete</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
|
<script type="text/javascript" src="../../build/json/json-min.js"></script>
|
|
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
|
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>
|
|
|
|
<!--there is no custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Datatable with Autocomplete</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This example uses two <a href="http://developer.yahoo.com/yui/autocomplete/">AutoComplete Controls</a> to populate a DataTable with data received via XHR from the Yahoo! Local webservice.</p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<style type="text/css">
|
|
#autocomplete, #autocomplete_zip {
|
|
height: 25px;
|
|
}
|
|
#dt_input, #dt_input_zip {
|
|
position: static;
|
|
width: 300px;
|
|
}
|
|
#dt_input_zip {
|
|
width: 60px;
|
|
}
|
|
#dt_ac_container, #dt_ac_zip_container {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<div id="autocomplete">
|
|
<label for="dt_input">Search Term: </label><input id="dt_input" type="text" value="pizza">
|
|
<div id="dt_ac_container"></div>
|
|
</div>
|
|
<div id="autocomplete_zip">
|
|
<label for="dt_input_zip">Zip Code: </label><input id="dt_input_zip" type="text" value="94089">
|
|
<div id="dt_ac_zip_container"></div>
|
|
</div>
|
|
|
|
<div id="json"></div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
queryString = '&results=20&output=json',
|
|
zip = null,
|
|
myDataSource = null,
|
|
myDataTable = null;
|
|
|
|
var getZip = function(query) {
|
|
query = parseInt(query, 10);
|
|
if (!YAHOO.lang.isNumber(query)) {
|
|
query = zip;
|
|
Dom.get('dt_input_zip').value = zip;
|
|
YAHOO.log('Invalid zip code, must be a number', 'warn', 'example');
|
|
}
|
|
myDataSource.sendRequest('datatable=yes&zip=' + query + '&query=' + Dom.get('dt_input').value + queryString,
|
|
myDataTable.onDataReturnInitializeTable, myDataTable);
|
|
};
|
|
var getTerms = function(query) {
|
|
myDataSource.sendRequest('datatable=yes&query=' + query + '&zip=' + Dom.get('dt_input_zip').value + queryString,
|
|
myDataTable.onDataReturnInitializeTable, myDataTable);
|
|
};
|
|
|
|
Event.onDOMReady(function() {
|
|
zip = Dom.get('dt_input_zip').value;
|
|
|
|
var oACDS = new YAHOO.util.FunctionDataSource(getTerms);
|
|
oACDS.queryMatchContains = true;
|
|
var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS);
|
|
|
|
|
|
var oACDSZip = new YAHOO.util.FunctionDataSource(getZip);
|
|
oACDSZip.queryMatchContains = true;
|
|
var oAutoCompZip = new YAHOO.widget.AutoComplete("dt_input_zip","dt_ac_zip_container", oACDSZip);
|
|
//Don't query until we have 5 numbers for the zip code
|
|
oAutoCompZip.minQueryLength = 5;
|
|
|
|
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
|
elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
|
|
};
|
|
|
|
var myColumnDefs = [
|
|
{ key:"Title",
|
|
label:"Name",
|
|
sortable:true,
|
|
formatter: formatUrl
|
|
},
|
|
{ key:"Phone" },
|
|
{ key:"City" },
|
|
{ key:"Rating.AverageRating",
|
|
label:"Rating",
|
|
formatter:YAHOO.widget.DataTable.formatNumber,
|
|
sortable:true
|
|
}
|
|
];
|
|
|
|
myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?");
|
|
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
|
myDataSource.connXhrMode = "queueRequests";
|
|
myDataSource.responseSchema = {
|
|
resultsList: "ResultSet.Result",
|
|
fields: [
|
|
"Title",
|
|
"Phone",
|
|
"City",
|
|
{
|
|
key: "Rating.AverageRating",
|
|
parser:"number"
|
|
},
|
|
"ClickUrl"
|
|
]
|
|
};
|
|
|
|
myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
|
|
myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString });
|
|
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|