inputEx - Autocomplete Usage

Basic Autocomplete creation

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+"'
"); });

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 = 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(oResultItem) {
					var post = oResultItem[1];
					return post.u;
				},
				// Autocompleter options
				autoComp: {
			  	source: new Y.DataSource.Function({
			  	  source: 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 post = Delicious.posts[i];
  						  var desc = post.d.toLowerCase();
  						  if( desc.indexOf(query) != -1) {
  							  aResults.push(post);
  						  }
  					  }
  					  return aResults;
			  	  }
		  	  }),
			  	
					forceSelection: true,
					minQueryLength: 2,
					maxResultsDisplayed: 50,
					
					resultFormatter: function(sQuery, results) {
					  return Y.Array.map(results, function (result) {
					    console.log("format", result);
  						var post = result.raw;

  						// NOTE: we use String.fromCharCode(60) and String.fromCharCode(62) for tags
         			return String.fromCharCode(60)+'a href="'+post.u+'" target="_new"'+
         			          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);
         			
       			});
          }
          
				}
			});
			
			Y.Node.create("").appendTo('#container2').on('click', function() {
				alert( deliciousAC.getValue() );
			});