mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-15 05:53:13 +00:00
109 lines
3.8 KiB
HTML
109 lines
3.8 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>Searching Field A, Submitting Field B with itemSelectEvent</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" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/animation/animation-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>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
#myAutoComplete {
|
|
width:15em; /* set width here or else widget will expand to fit its container */
|
|
padding-bottom:2em;
|
|
}
|
|
#mySubmit {
|
|
position:absolute; left:15em; margin-left:1em; /* place the button next to the input */
|
|
}
|
|
</style>
|
|
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. The data consists of an account name, and an account number. The AutoComplete allows the user to search by name, but by subscribing to the itemSelectEvent Custom Event, populates a hidden form field with the ID, which the server would need for processing the hypothetical submission.</p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<form id="myForm" action="#">
|
|
<label for="myInput">Find a company in the accounts database:</label>
|
|
<div id="myAutoComplete">
|
|
<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
|
|
<div id="myContainer"></div>
|
|
</div>
|
|
<input id="myHidden" type="hidden">
|
|
</form>
|
|
|
|
<script type="text/javascript" src="assets/js/data.js"></script>
|
|
<script type="text/javascript">
|
|
YAHOO.example.ItemSelectHandler = function() {
|
|
// Use a LocalDataSource
|
|
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.accounts);
|
|
oDS.responseSchema = {fields : ["name", "id"]};
|
|
|
|
// Instantiate the AutoComplete
|
|
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
|
oAC.resultTypeList = false;
|
|
|
|
// Define an event handler to populate a hidden form field
|
|
// when an item gets selected
|
|
var myHiddenField = YAHOO.util.Dom.get("myHidden");
|
|
var myHandler = function(sType, aArgs) {
|
|
var myAC = aArgs[0]; // reference back to the AC instance
|
|
var elLI = aArgs[1]; // reference to the selected LI element
|
|
var oData = aArgs[2]; // object literal of selected item's result data
|
|
|
|
// update hidden form field with the selected item's ID
|
|
myHiddenField.value = oData.id;
|
|
};
|
|
oAC.itemSelectEvent.subscribe(myHandler);
|
|
|
|
// Rather than submit the form,
|
|
// alert the stored ID instead
|
|
var onFormSubmit = function(e, myForm) {
|
|
YAHOO.util.Event.preventDefault(e);
|
|
alert("Company ID: " + myHiddenField.value);
|
|
};
|
|
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("myForm"), "submit", onFormSubmit);
|
|
|
|
return {
|
|
oDS: oDS,
|
|
oAC: oAC
|
|
};
|
|
}();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|