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.