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.
autoAccountList.push('{!accList.name}');

// Establish a connection with salesforce database using the sforce.connection.init(sessionID, ServerURL) function.
var sessionId = '{!$Api.Session_ID}';
var server = "https://" + window.location.host + "/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.
for(i=0;i
Account(This list is coming from the Apex class)

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

 

 

Responses

Popular Salesforce Blogs