Use the following code to create a basic inputEx Autocomplete.
var field = inputEx({ type: "autocomplete", parentEl: 'container1', label: 'Search US state', // Format the hidden value (value returned by the form) returnValue: function(oResultItem) { return oResultItem.value; }, autoComp: {// options of the YUI3 autocompleter (see http://developer.yahoo.com/yui/3/autocomplete/#config) minQueryLength: 2, maxResults: 50, resultTextLocator: 'label', source: [{label: "Massachusets", value: "MA"}, {label: "state2", value: 2}, {label: "state3", value:3}] } }); Y.Node.create("").appendTo('#container1').on( 'click', function() { alert( field.getValue() ); }); field.on("updated", function(value) { Y.one('#container1').append("Updated at "+(new Date())+" with value '"+value+"'"); });
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/v2/json/neyric?count=50 script included in the page var deliciousAC = new Y.inputEx.AutoComplete({ label: 'Search my delicious bookmarks', description: 'Try "javascript" or "rails"', parentEl: 'container2', name: 'chosen_url', // Format the hidden value (value returned by the form) returnValue: function(post) { return post.u; // return post URL }, // Autocompleter options autoComp: { source: 'http://feeds.delicious.com/v2/json/neyric?count=50&callback={callback}', forceSelection: true, minQueryLength: 2, maxResultsDisplayed: 50, resultFilters: 'subWordMatch', resultHighlighter: 'subWordMatch', resultTextLocator: 'd' } }); Y.Node.create("").appendTo('#container2').on('click', function() { alert( deliciousAC.getValue() ); });