Using jQuery’s AutoComplete in Salesforce – Part 1

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.

autoComplete
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’.

17 thoughts on “Using jQuery’s AutoComplete in Salesforce – Part 1”

  1. Pingback: Using jQuery’s AutoComplete in Salesforce – Part 2 | Salesforce, Timepass and more….

    1. Hey this is not working for please let me know if there are some prerequirements to perform auto complete

      Reply

      1. Its very hard to debug as to why its not working unless you give in more details. Did you follow the exact steps mentioned in the post?Which browser are you using? There are no prerequisite steps to be performed, you can paste the code and that should be it.

  3. I am using Mozilla. I have a custom object “Request” in which there is a field JOB for which i want auto complete. the values which i require in this field are Job__c.Name. i have tried your approach but did not get the result. please suggest

    Reply

      1. I have already changed those …but still not able to find desired results… do i need to create a component for that.

  5. //some css errors. Author removed the all the css errors
    11:46:59.246 SyntaxError: missing ) after argument list requestform:932
    11:47:03.328 Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

    This is what my console is showing.

    Reply

  6. i have corrected it.. now its showing Use of getPreventDefault() is deprecated. Use defaultPrevented instead. should i need to use updated version of jquery?

    Reply

  7. Hi,
    found two problems
    1- I was using instead of
    2- there was a record xyz’v so when we are this into js array it was like ‘xyz’v’ so it is searching for ‘)’ after xyz

    Reply

    1. I didn’t understand your 1st point. For the second point, if you want to use an quote in a array then you have to escape it, something like this:

      var sampleArray = [‘xyz\’v’,’abc’];

      Reply

  8. Now just wants to confirm one thing from you . when i am typing a single alphabet it is suggesting every string containing that alphabet . so can we filter it more accurately like if we type ‘a’ then it suggest only those names which are starting with character ‘a’ for ex- ‘anshuman’ not ‘barat’.

    Reply

    1. Yes, you can do that. Instead of the simply assigning the countryArray to the source, you have to to do a regex match something like this.

      source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( countryArray, function( item ){
              return matcher.test( item );
          }) );
      }
      Reply
  9. Pingback: Автозаполнение javascript / jquery на стандартном макете

Leave a comment