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.
Data:
1 | YAHOO.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:
1 | YAHOO.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 | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings