Transform your Visualforce Lookups into jQuery Autocompletes

Those standard reference Visualforce inputfields not working out for you? Why not switch over to jQuery autocomplete?

First, load up what you need:

      <script type="text/javascript" src="{!URLFOR($Resource.JQueryUICup,'js/jquery-1.4.2.min.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.JQueryUICup,'js/jquery-ui-1.8.1.custom.min.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.JQAutocomplete11,'jquery-autocomplete/jquery.autocomplete.pack.js')}"></script>

      <apex:stylesheet value="{!URLFOR($Resource.JQAutocomplete11,'jquery-autocomplete/jquery.autocomplete.css')}"/>      
      <apex:stylesheet value="{!URLFOR($Resource.JQAutocomplete11,'jquery-autocomplete/demo/main.css')}"/>

Then add a method that will transform all of the data for the object you are looking into json:

    public String getJson(String displayColumn)
     {
     	if (jsonData == null) 
     	{

	     	jsonData = '';
			try {
				System.debug('getJsonifiedObjectRecords for:' + fieldname + ' ' + objectToLookup );
				  
				List<String> columns = new List<String>();
				  
				columns.add('id');
				if(displayColumn != null)
					columns.add(displayColumn);
				else
					columns.add('name');   
				  
				String queryString = 'Select id, ' + displayColumn + ' from ' + objectToLookup + ' limit 1000';
				System.debug('queryString:' + queryString);
				List<sObject> sos = Database.query(queryString);
				//Map<String, Schema.SObjectField> columns = sos.getSObjectType().getDescribe().fields.getMap();
									  
				jsonData += '[';    
		        for (sObject so : sos) {  
		        		jsonData += ' { ';
						  for(String column : columns)
				          {   
				          			System.debug('jsonData:' + jsonData);
				                     try 
				                     {
				                     	string cellVal = String.valueOf( so.get(column));
				                        jsonData += ''+column+': "'+cellVal+'",';   
				                     }   
				                     catch(Exception ex) 
				                     {
										System.debug(ex);
				                     }
						 }
			 			 jsonData = jsonData.substring(0, jsonData.length() - 1);
	                	 jsonData = jsonData + '},';  
						 
		        }
		
				jsonData = jsonData.subString(0,jsonData.length() - 1);
		        jsonData = jsonData + ']';
				
	        }
			catch(Exception e)
			{	
				System.debug('Bad query in Jsonify Call ' + e);			
			}
     }
     	
      	System.debug('jsonData:' + jsonData);
        return jsonData;
      	}

We use the displayName variable to specify which field we want to display when generating the autocomplete. See the community boards and Joe Ferraro’s article for some more cool examples of generating JSON.

Now we are ready to include our Autocomplete field. All we need is one field to show and a second hidden field to store the result ID in.

Something like this:

		  <apex:outputPanel>
			<tr>
				<td><apex:outputText value="field.Label__c" /></td>
				<td>
					<span class="cfs{!field.order}">
					     <input id="cfi{!field.order}"  type="text" style="width:200px"/>
					     <apex:inputHidden value="{!field.Text_Value__c}" />
					</span>
				</td>
			  </tr>
			</apex:outputPanel>   

Now all we need to do is add in the nifty Javascript that enables it:

		        				var cf{!f.order}data = {!f.json};
								$("#cfi{!f.order}").autocomplete(cf{!f.order}data, {

													 formatItem: function(item) {
													   return item.name;      
													   }   

													 }).result(function(event, item) {
															  $(".cfs{!f.order} :input:hidden:first").val(item.id);
															});  
		        </apex:repeat>       

My code is a little more complicated than yours needs to be since I am automatically populating all of the form elements.

Here’s the result:

See a live examples of this and other JQuery enhanced components I am working on here.