<!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>
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://www.magna.net/yui/build/yuiloader/yuiloader-min.js"></script>
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "",
require: ["animation","autocomplete","datasource"],
loadOptional: false,
combine: true,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
//you can make use of all requested YUI modules
//here.
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/animation/animation-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js"></script>
<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>
<!--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">
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "",
require: ["animation","autocomplete","datasource"],
loadOptional: false,
combine: true,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
//you can make use of all requested YUI modules
//here.
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
<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="http://www.magna.net/yui/build/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>
