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

Sample Code

Data:

CSS:

Markup:

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

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.