# inputEx - Autocomplete Usage

## Basic Autocomplete creation

Use the following code to create a basic inputEx Autocomplete.

// Autocompleter var field = inputEx({ type: "autocomplete", 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 = inputEx.cn('div', null, null, ""); YAHOO.util.Dom.get('container1').appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.appendChild( inputEx.cn('div',null, null, "Updated at "+(new Date())+" with value '"+value+"'") ); });

## Delicious Autocompleter

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

// Example 2: Delicious autocompleter // 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 deliciousAC = inputEx({ type: "autocomplete", label: 'Search my delicious bookmarks', description: 'Try "javascript" or "rails"', parentEl: 'container2', name: 'chosen_url', datasource: 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-1 ; i++) { var desc = Delicious.posts[i].d.toLowerCase(); if( desc.indexOf(query) != -1) { aResults.push([Delicious.posts[i].d, Delicious.posts[i]]); } } return aResults; }), datasourceParameters: { maxCacheEntries: 100 }, // 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]; // NOTE: we use String.fromCharCode(60) and String.fromCharCode(62) for tags because otherwise our example is broken 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); } } }); 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() ); });

## YUI JSON autocomplete

Uses the Yahoo search API within posts

// Example 3: YUI autocompleter // Setting to default value for demonstration purposes. // The webservice needs to support execution of a callback function. var yuiAC = inputEx({ type: "autocomplete", label: 'Search the YUI Site bookmarks', description: 'Try "javascript" or "Tree"', parentEl: 'container3', name: 'chosen_url', datasource: new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/WebSearchService/V1/webSearch"), // Format the hidden value (value returned by the form) returnValue: function(oResultItem) { var post = oResultItem[1]; return post; }, datasourceParameters: { scriptCallbackParam : "callback", responseSchema : { resultsList: "ResultSet.Result", fields: ["Title","Url","ClickUrl"] } }, // Autocompleter options autoComp: { forceSelection: true, minQueryLength: 2, maxResultsDisplayed: 50, generateRequest: function(sQuery) { return "?appid=YahooDemo&output=json&site=developer.yahoo.com&site=yuiblog.com®ion=us&query=" + sQuery ; }, formatResult: function(oResultItem, sQuery) { return oResultItem[0] + " (" + oResultItem[1] + ")"; } } }); var button = inputEx.cn('button', null, null, 'GetValue'); YAHOO.util.Dom.get('container3').appendChild(button); YAHOO.util.Event.addListener(button , 'click', function() { alert( yuiAC.getValue() ); });