YUI Library Home

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.

Enter a state or an area code:

Sample Code

Data:

1YAHOO.example.Data.arrayAreaCodesStates = [ 
2    ["201""New Jersey"], 
3    ["202""Washington, DC"], 
4    ["203""Connecticut"], 
5    ["204""Manitoba, Canada"], 
6    ["205""Alabama"], 
7    ["206""Washington"], 
8    ["207""Maine"], 
9    ... 
10]; 
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} 
view plain | print | ?

Markup:

1<div id="myAutoComplete"
2    <input id="myInput" type="text"
3    <div id="myContainer"></div> 
4</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.FnMultipleFields = function(){ 
2    var allData = YAHOO.example.Data.arrayAreaCodesStates; 
3     
4    // Track each interaction if it is against a state or an area code 
5    var nSearchField; 
6     
7    // Define a custom search function 
8    var searchAreaCodesAndStates = function(sQuery) { 
9        var allMatches = [], 
10            item, i, l; 
11             
12        // 0 for area code, 1 for state 
13        nSearchField = (YAHOO.lang.isNumber(sQuery*1)) ? 0 : 1; 
14 
15        for(i=0, l=allData.length; i<l; i++) { 
16            item = allData[i]; 
17             
18            // State must be made case-insensitve and make the state return as index 0 
19            if(nSearchField) { 
20                if(item[nSearchField].toLowerCase().indexOf(sQuery.toLowerCase()) === 0) { 
21                    allMatches[allMatches.length] = [item[1], item[0]]; 
22                } 
23            } 
24            // Area codes are simpler 
25            else { 
26                if(item[nSearchField].indexOf(sQuery) === 0) { 
27                    allMatches[allMatches.length] = item; 
28                } 
29            } 
30        } 
31         
32        // States should be sorted alphabetically 
33        // Define schema on the fly (since the return order changes) 
34        if(nSearchField) { 
35            allMatches.sort(); 
36            this.responseSchema = {fields: ["state""areacode"]}; 
37        } 
38        else { 
39            this.responseSchema = {fields: ["areacode""state"]}; 
40        } 
41        return allMatches; 
42    }; 
43 
44    // Use a FunctionDataSource 
45    var oDS = new YAHOO.util.FunctionDataSource(searchAreaCodesAndStates); 
46 
47    // Instantiate AutoComplete 
48    var oAC = new YAHOO.widget.AutoComplete("myInput""myContainer", oDS); 
49    oAC.useShadow = true
50    oAC.resultTypeList = false
51    oAC.formatResult = function(oResultData, sQuery, sResultMatch) { 
52        return (sResultMatch + " (" + ((nSearchField) ? oResultData.areacode : oResultData.state) + ")"); 
53    }; 
54     
55    return { 
56        fnSearch: searchAreaCodesAndStates, 
57        oDS: oDS, 
58        oAC: oAC  
59    }; 
60}(); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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