How To Implement JQuery AutoComplete

JQuery Autocomplete enhances the UI functionality of visualforce page, when a user types in a field it quickly find and select from a pre-populated list of values, leveraging searching and filtering. We can achieve this functionality by using Jquery with Ajax or by using custom controller in Salesforce.

Here is example in which i am using both option's, Account is coming from the controller and the contact records that we are getting is by using Ajax.

Code for Controller:-

public class AutoCompleteJQueryController{
//list which returns accounts records
public list getAccountRecords(){
return [select id,name from account limit 25];

// tag to assign controller List values to javascript variable.

//Store the name of the account in the array variable.

// Establish a connection with salesforce database using the sforce.connection.init(sessionID, ServerURL) function.
var sessionId = '{!$Api.Session_ID}';
var server = "https://" + + "/services/Soap/u/26.0";
sforce.connection.init(sessionId, server);

//Here we query the contact object using the sforce.connection.query function. This will return 200 results.
var result = sforce.connection.query("select Name from Contact");
var records = result.getArray("records");
var ContactList =[];

//Traverse the list of contact and store the value in javascript array variable which will then assign those values to the source of the autocomplete.
Account(This list is coming from the Apex class)

Contact(This list is coming from salesforce's ajax toolkit)




Popular Salesforce Blogs