YUI Library Examples: AutoComplete Control: FunctionDataSource to Search Multiple Fields of an Address Book at Runtime

Sample Code

Data:

CSS:

Markup:

JavaScript:

YAHOO.example.FnMultipleFields = function(){
    var myContacts = [
        {id:0, fname:"Alice", lname:"Abrams", nname:"ace"},
        {id:1, fname:"Abraham", lname:"Axelrod", nname:"Abe"},
        {id:2, fname:"Bruce", lname:"Baxter", nname:null},
        {id:3, fname:"Robert", lname:"Brown", nname:"Bob"},
        {id:4, fname:"Carl", lname:"Carlson", nname:null},
        {id:5, fname:"Charlie", lname:"Chaplin", nname:"Chuck"},
        {id:6, fname:"Darla", lname:"Darling", nname:null},
        {id:7, fname:"David", lname:"Dashing", nname:"Dave"},
        {id:8, fname:"Egbert", lname:"Excellent", nname:null},
        {id:9, fname:"Engleberg", lname:"Humperdink", nname:null}
    ];
    
    // Define a custom search function for the DataSource
    var matchNames = function(sQuery) {
        // Case insensitive matching
        var query = sQuery.toLowerCase(),
            contact,
            i=0,
            l=myContacts.length,
            matches = [];
        
        // Match against each name of each contact
        for(; i<l; i++) {
            contact = myContacts[i];
            if((contact.fname.toLowerCase().indexOf(query) > -1) ||
                (contact.lname.toLowerCase().indexOf(query) > -1) ||
                (contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
                matches[matches.length] = contact;
            }
        }

return matches;
    };

// Use a FunctionDataSource
    var oDS = new YAHOO.util.FunctionDataSource(matchNames);
    oDS.responseSchema = {
        fields: ["id", "fname", "lname", "nname"]
    }

// Instantiate AutoComplete
    var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
    oAC.useShadow = true;
    oAC.resultTypeList = false;
    
    
    // Custom formatter to highlight the matching letters
    oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
        var query = sQuery.toLowerCase(),
            fname = oResultData.fname,
            lname = oResultData.lname,
            nname = oResultData.nname || "", // Guard against null value
            query = sQuery.toLowerCase(),
            fnameMatchIndex = fname.toLowerCase().indexOf(query),
            lnameMatchIndex = lname.toLowerCase().indexOf(query),
            nnameMatchIndex = nname.toLowerCase().indexOf(query),
            displayfname, displaylname, displaynname;
            
        if(fnameMatchIndex > -1) {
            displayfname = highlightMatch(fname, query, fnameMatchIndex);
        }
        else {
            displayfname = fname;
        }

if(lnameMatchIndex > -1) {
            displaylname = highlightMatch(lname, query, lnameMatchIndex);
        }
        else {
            displaylname = lname;
        }

if(nnameMatchIndex > -1) {
            displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
        }
        else {
            displaynname = nname ? "(" + nname + ")" : "";
        }

return displayfname + " " + displaylname + " " + displaynname;
        
    };
    
    // Helper function for the formatter
    var highlightMatch = function(full, snippet, matchindex) {
        return full.substring(0, matchindex) + 
                "<span class='match'>" + 
                full.substr(matchindex, snippet.length) + 
                "</span>" +
                full.substring(matchindex + snippet.length);
    };

// Define an event handler to populate a hidden form field
    // when an item gets selected and populate the input field
    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;
        
        myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
    };
    oAC.itemSelectEvent.subscribe(myHandler);
    
    return {
        oDS: oDS,
        oAC: oAC 
    };
}();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: AutoComplete Control: FunctionDataSource to Search Multiple Fields of an Address Book at Runtime

Sample Code

Configuration for This Example

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: