Use the following code to create a basic inputEx Autocomplete.
1 | // Autocompleter |
2 | var field = inputEx({ |
3 | type: "autocomplete", |
4 | parentEl: 'container1', |
5 | label: 'Search US state', |
6 | datasource: new YAHOO.widget.DS_JSFunction( getStates), // see http://developer.yahoo.com/yui/examples/autocomplete/assets/js/states_jsfunction.js for getState function |
7 | |
8 | // Format the hidden value (value returned by the form) |
9 | returnValue: function(oResultItem) { |
10 | return oResultItem[1]; |
11 | }, |
12 | autoComp: { |
13 | forceSelection: true, |
14 | minQueryLength: 2, |
15 | maxResultsDisplayed: 50, |
16 | formatResult: function(oResultItem, sQuery) { |
17 | var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; |
18 | return sMarkup; |
19 | } |
20 | } |
21 | }); |
22 | |
23 | var button = inputEx.cn('button', null, null, 'GetValue'); |
24 | YAHOO.util.Dom.get('container1').appendChild(button); |
25 | YAHOO.util.Event.addListener(button , 'click', function() { |
26 | alert( field.getValue() ); |
27 | }); |
28 | |
29 | var logDiv = inputEx.cn('div', null, null, ""); |
30 | YAHOO.util.Dom.get('container1').appendChild(logDiv); |
31 | field.updatedEvt.subscribe(function(e,params) { |
32 | var value = params[0]; |
33 | logDiv.appendChild( inputEx.cn('div',null, null, "Updated at "+(new Date())+" with value '"+value+"'") ); |
34 | }); |
view plain | print | ? |
Uses the del.icio.us json API to search within posts
1 | // Example 2: Delicious autocompleter |
2 | |
3 | // Delicious DataSource using a JSFunction |
4 | // Delicious.posts is set by the http://feeds.delicious.com/feeds/json/neyric?count=100 script included in the page |
5 | |
6 | var deliciousAC = inputEx({ |
7 | type: "autocomplete", |
8 | label: 'Search my delicious bookmarks', |
9 | description: 'Try "javascript" or "rails"', |
10 | parentEl: 'container2', |
11 | name: 'chosen_url', |
12 | datasource: new YAHOO.widget.DS_JSFunction( function (sQuery) { |
13 | if (!sQuery || sQuery.length == 0) { |
14 | return false; |
15 | } |
16 | var query = sQuery.toLowerCase(); |
17 | var aResults = []; |
18 | for(var i = 0 ; i != Delicious.posts.length-1 ; i++) { |
19 | var desc = Delicious.posts[i].d.toLowerCase(); |
20 | if( desc.indexOf(query) != -1) { |
21 | aResults.push([Delicious.posts[i].d, Delicious.posts[i]]); |
22 | } |
23 | } |
24 | return aResults; |
25 | }), |
26 | datasourceParameters: { |
27 | maxCacheEntries: 100 |
28 | }, |
29 | // Format the hidden value (value returned by the form) |
30 | returnValue: function(oResultItem) { |
31 | var post = oResultItem[1]; |
32 | return post.u; |
33 | }, |
34 | // Autocompleter options |
35 | autoComp: { |
36 | forceSelection: true, |
37 | minQueryLength: 2, |
38 | maxResultsDisplayed: 50, |
39 | formatResult: function(oResultItem, sQuery) { |
40 | var post = oResultItem[1]; |
41 | // NOTE: we use String.fromCharCode(60) and String.fromCharCode(62) for tags because otherwise our example is broken |
42 | return String.fromCharCode(60)+'a href="'+post.u+'"'+String.fromCharCode(62)+'visit'+String.fromCharCode(60)+'/a'+String.fromCharCode(62)+' '+String.fromCharCode(60)+'span target="_new"'+String.fromCharCode(62)+post.d+String.fromCharCode(60)+'/span'+String.fromCharCode(62); |
43 | } |
44 | } |
45 | }); |
46 | var button = inputEx.cn('button', null, null, 'GetValue'); |
47 | YAHOO.util.Dom.get('container2').appendChild(button); |
48 | YAHOO.util.Event.addListener(button , 'click', function() { |
49 | alert( deliciousAC.getValue() ); |
50 | }); |
view plain | print | ? |
Uses the Yahoo search API within posts
1 | // Example 3: YUI autocompleter |
2 | |
3 | // Setting to default value for demonstration purposes. |
4 | // The webservice needs to support execution of a callback function. |
5 | |
6 | var yuiAC = inputEx({ |
7 | type: "autocomplete", |
8 | label: 'Search the YUI Site bookmarks', |
9 | description: 'Try "javascript" or "Tree"', |
10 | parentEl: 'container3', |
11 | name: 'chosen_url', |
12 | datasource: new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/WebSearchService/V1/webSearch"), |
13 | // Format the hidden value (value returned by the form) |
14 | returnValue: function(oResultItem) { |
15 | var post = oResultItem[1]; |
16 | return post; |
17 | }, |
18 | datasourceParameters: { |
19 | scriptCallbackParam : "callback", |
20 | responseSchema : { |
21 | resultsList: "ResultSet.Result", |
22 | fields: ["Title","Url","ClickUrl"] |
23 | } |
24 | }, |
25 | // Autocompleter options |
26 | autoComp: { |
27 | forceSelection: true, |
28 | minQueryLength: 2, |
29 | maxResultsDisplayed: 50, |
30 | generateRequest: function(sQuery) { |
31 | return "?appid=YahooDemo&output=json&site=developer.yahoo.com&site=yuiblog.com®ion=us&query=" + sQuery ; |
32 | }, |
33 | formatResult: function(oResultItem, sQuery) { |
34 | return oResultItem[0] + " (" + oResultItem[1] + ")"; |
35 | } |
36 | } |
37 | }); |
38 | var button = inputEx.cn('button', null, null, 'GetValue'); |
39 | YAHOO.util.Dom.get('container3').appendChild(button); |
40 | YAHOO.util.Event.addListener(button , 'click', function() { |
41 | alert( yuiAC.getValue() ); |
42 | }); |
view plain | print | ? |