inputEx - Autocomplete Usage

Basic Autocomplete creation

Use the following code to create a basic inputEx Autocomplete.

// Autocompleter var field = inputEx({ type: "autocomplete", inputParams: { parentEl: 'container1', label: 'Search US state', datasource: new YAHOO.widget.DS_JSFunction( getStates), // see http://developer.yahoo.com/yui/examples/autocomplete/assets/js/states_jsfunction.js for getState function // Format the hidden value (value returned by the form) returnValue: function(oResultItem) { return oResultItem[1]; }, autoComp: { forceSelection: true, minQueryLength: 2, maxResultsDisplayed: 50, formatResult: function(oResultItem, sQuery) { var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; return sMarkup; } } } }); var button = inputEx.cn('button', null, null, 'GetValue'); YAHOO.util.Dom.get('container1').appendChild(button); YAHOO.util.Event.addListener(button , 'click', function() { alert( field.getValue() ); }); var logDiv = YAHOO.inputEx.cn('div', null, null, ""); YAHOO.util.Dom.get('container1').appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value '"+value+"'<br />"; });

Delicious Autocompleter

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

// Delicious DataSource using a JSFunction // Delicious.posts is set by the http://feeds.delicious.com/feeds/json/neyric?count=100 script included in the page var deliciousDS = new YAHOO.widget.DS_JSFunction(function (sQuery) { if (!sQuery || sQuery.length == 0) return false; var query = sQuery.toLowerCase(); var aResults = []; for(var i = 0 ; i < Delicious.posts.length ; i++) { var desc = Delicious.posts[i].d.toLowerCase(); if( desc.indexOf(query) != -1) { aResults.push([Delicious.posts[i].d, Delicious.posts[i]]); } } return aResults; }); deliciousDS.maxCacheEntries = 100; var deliciousAC = inputEx({ type: "autocomplete", inputParams: { label: 'Search my delicious bookmarks', description: 'Try "javascript"', parentEl: 'container2', name: 'chosen_url', datasource: deliciousDS, // Format the hidden value (value returned by the form) returnValue: function(oResultItem) { var post = oResultItem[1]; return post.u; }, // Autocompleter options autoComp: { forceSelection: true, minQueryLength: 2, maxResultsDisplayed: 50, formatResult: function(oResultItem, sQuery) { var post = oResultItem[1]; return '<a href="'+post.u+'">visit</a> <span target="_new">'+post.d+'</span>'; } } } }); var button = inputEx.cn('button', null, null, 'GetValue'); YAHOO.util.Dom.get('container2').appendChild(button); YAHOO.util.Event.addListener(button , 'click', function() { alert( deliciousAC.getValue() ); });