Tag: salesforce

Using the Auto-Complete plugin enhances the UI functionality. Whenever a user enter a value in a input field, the auto-complete will show the user a possible set of value which matches the user input value.

Now, Just to show an example , I will use the auto-complete functionality on a country input field. When a user starts entering a value, based on his entry we will show the possible values. We will make use of the jQuery auto-complete plugin. This plugin makes it very simple to implement the autocomplete in salesforce, any HTML content for that matter.

In the first example we will use the plugin in a VF page then we will implement a similar functionality on a standard page.

Step 1: Create a VF page, I will name it AutoCompleteExample
Step 2: Copy the below code and save the page.
Step 3: Open the VF page you have just created (https://yourSaleforceInstance/apex/AutoCompleteExample). You will be able to see a input field, Start entering some text. Voila!! you will be able to see autocomplete in Action.

<apex:page>
	<!--Make sure you have the Javascript in the same order that I have listed below.-->
	<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
	<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
	<script type="text/javascript">
		//Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.
		var j$ = jQuery.noConflict();
		//Capture the list of countries in a Array.
		var countryArray = ['India', 'USA', 'China','FInland','Norway','Netherlands','England','Ukraine','Russia','Japan','Korea','Burma','Srilanka','Iran','Iceland','Canada','Rome','Australia','Armenia','Albania','Afghanisthan'];
		//on Document ready
		j$(document).ready(function(){
			j$("#countryautocomplete").autocomplete({
				source : countryArray
			});
		});
	</script>
	<apex:form>
		<b>Enter Text</b><input type="text" id="countryautocomplete"/>
	</apex:form>
</apex:page>

P.S: This code may not work correctly in Google Chrome Browser initially.
Workaround: When you load the VF page for the 1st time in Chrome, you will see a shield (gray in color) in the address bar, click on it and select ‘Load unsafe javascript’.