inputEx - Autocomplete Usage

Basic Autocomplete creation

Use the following code to create a basic inputEx Autocomplete.

1// Autocompleter 
2var 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 
23var button = inputEx.cn('button'nullnull'GetValue'); 
24YAHOO.util.Dom.get('container1').appendChild(button); 
25YAHOO.util.Event.addListener(button , 'click'function() { 
26    alert( field.getValue() ); 
27}); 
28 
29var logDiv = inputEx.cn('div'nullnull""); 
30YAHOO.util.Dom.get('container1').appendChild(logDiv); 
31field.updatedEvt.subscribe(function(e,params) { 
32    var value = params[0]; 
33    logDiv.appendChild( inputEx.cn('div',nullnull"Updated at "+(new Date())+" with value '"+value+"'") ); 
34}); 
view plain | print | ?

Delicious Autocompleter

Uses the del.icio.us json API to search within posts

Try "javascript" or "rails"
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 
6var 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}); 
46var button = inputEx.cn('button'nullnull'GetValue'); 
47YAHOO.util.Dom.get('container2').appendChild(button); 
48YAHOO.util.Event.addListener(button , 'click'function() { 
49    alert( deliciousAC.getValue() ); 
50}); 
view plain | print | ?

YUI JSON autocomplete

Uses the Yahoo search API within posts

Try "javascript" or "Tree"
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 
6var 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}); 
38var button = inputEx.cn('button'nullnull'GetValue'); 
39YAHOO.util.Dom.get('container3').appendChild(button); 
40YAHOO.util.Event.addListener(button , 'click'function() { 
41    alert( yuiAC.getValue() ); 
42}); 
view plain | print | ?