YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Custom Function to Search Different Fields at Runtime

# AutoComplete Control: Custom Function to Search Different Fields at Runtime

This example uses a FunctionDataSource that performs string matching against different fields of a two-dimensional array at runtime, depending on whether the input is a letter or a number. Since the data for this example is already loaded into memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. When the searched field is determined, the DataSource schema also needs to be updated on the fly. A custom formatter allows users to see both state and area code values for each result.

View example in new window.

### Enter a state or an area code:

## Sample Code

Data:

YAHOO.example.Data.arrayAreaCodesStates = [ ["201", "New Jersey"], ["202", "Washington, DC"], ["203", "Connecticut"], ["204", "Manitoba, Canada"], ["205", "Alabama"], ["206", "Washington"], ["207", "Maine"], ... ];

CSS:

#myAutoComplete { width:15em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em; }

Markup:

<div id="myAutoComplete"> <input id="myInput" type="text"> <div id="myContainer"></div> </div>

JavaScript:

YAHOO.example.FnMultipleFields = function(){ var allData = YAHOO.example.Data.arrayAreaCodesStates; // Track each interaction if it is against a state or an area code var nSearchField; // Define a custom search function var searchAreaCodesAndStates = function(sQuery) { var allMatches = [], item, i, l; // 0 for area code, 1 for state nSearchField = (YAHOO.lang.isNumber(sQuery*1)) ? 0 : 1; for(i=0, l=allData.length; i<l; i++) { item = allData[i]; // State must be made case-insensitve and make the state return as index 0 if(nSearchField) { if(item[nSearchField].toLowerCase().indexOf(sQuery.toLowerCase()) === 0) { allMatches[allMatches.length] = [item[1], item[0]]; } } // Area codes are simpler else { if(item[nSearchField].indexOf(sQuery) === 0) { allMatches[allMatches.length] = item; } } } // States should be sorted alphabetically // Define schema on the fly (since the return order changes) if(nSearchField) { allMatches.sort(); this.responseSchema = {fields: ["state", "areacode"]}; } else { this.responseSchema = {fields: ["areacode", "state"]}; } return allMatches; }; // Use a FunctionDataSource var oDS = new YAHOO.util.FunctionDataSource(searchAreaCodesAndStates); // Instantiate AutoComplete var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); oAC.useShadow = true; oAC.resultTypeList = false; oAC.formatResult = function(oResultData, sQuery, sResultMatch) { return (sResultMatch + " (" + ((nSearchField) ? oResultData.areacode : oResultData.state) + ")"); }; return { fnSearch: searchAreaCodesAndStates, 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:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings