JavaScript DHTML/YUI Library/FunctionDataSource
FunctionDataSource to Search Multiple Fields of an Address Book at Runtime
<source lang="html4strict">
<!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>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</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="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>
<style type="text/css">
- myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em;
} .match {
font-weight:bold;
} </style>
</head>
<body class=" yui-skin-sam">
FunctionDataSource to Search Multiple Fields of an Address Book at Runtime
This example uses a FunctionDataSource to perform string matching against multiple fields of a contacts database at runtime. Since the data for this example is loaded into local memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. A custom formatter allows users to see their search term within the result set. An itemSelectEvent handler is used to update the input field with a custom value and to populate a hidden form field with the selected contact"s ID for eventually submitting back to a server.
Find a contact:
<input id="myInput" type="text">
<input id="myHidden" type="hidden">
<script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/data.js"></script> <script type="text/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) +
"" +
full.substr(matchindex, snippet.length) +
"" +
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
};
}(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>