YUI Library Examples: AutoComplete Control: Searching Field A, Submitting Field B with itemSelectEvent

Sample Code

Data:


1	YAHOO.example.Data.accounts: [
2	{name: "ABC Company", id: 57367 },
3	{name: "Acme Supply Company", id: 84377},
4	{name: "Avery Widgets", id: 73678},
5	{name: "AAA International", id: 73675},
6	{name: "Atlantic Brothers, Inc", id: 83757},
7	{name: "Ace Products", id: 48588},
8	{name: "Above Average, Ltd", id: 75968}
9	];
	view plain \| print \| ?

CSS:


1	#myAutoComplete {
2	width:15em; /* set width here or else widget will expand to fit its container */
3	padding-bottom:2em;
4	}
5	#mySubmit {
6	position:absolute; left:15em; margin-left:1em; /* place the button next to the input */
7	}
	view plain \| print \| ?

Markup:


1	<form id="myForm" action="#">
2	<label for="myInput">Find a company in the accounts database:</label>
3	<div id="myAutoComplete">
4	<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
5	<div id="myContainer"></div>
6	</div>
7	<input id="myHidden" type="hidden">
8	</form>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.ItemSelectHandler = function() {
2	// Use a LocalDataSource
3	var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.accounts);
4	oDS.responseSchema = {fields : ["name", "id"]};
5
6	// Instantiate the AutoComplete
7	var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
8	oAC.resultTypeList = false;
9
10	// Define an event handler to populate a hidden form field
11	// when an item gets selected
12	var myHiddenField = YAHOO.util.Dom.get("myHidden");
13	var myHandler = function(sType, aArgs) {
14	var myAC = aArgs[0]; // reference back to the AC instance
15	var elLI = aArgs[1]; // reference to the selected LI element
16	var oData = aArgs[2]; // object literal of selected item's result data
17
18	// update hidden form field with the selected item's ID
19	myHiddenField.value = oData.id;
20	};
21	oAC.itemSelectEvent.subscribe(myHandler);
22
23	// Rather than submit the form,
24	// alert the stored ID instead
25	var onFormSubmit = function(e, myForm) {
26	YAHOO.util.Event.preventDefault(e);
27	alert("Company ID: " + myHiddenField.value);
28	};
29	YAHOO.util.Event.addListener(YAHOO.util.Dom.get("myForm"), "submit", onFormSubmit);
30
31	return {
32	oDS: oDS,
33	oAC: oAC
34	};
35	}();
	view plain \| print \| ?

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
    };
}();

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

AutoComplete Control Examples:

More AutoComplete Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.