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];
}
}


<!-- Javascript/JQuery Links-->
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
 


 
 <!-- Javascript/JQuery Links-->
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

// 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)

 

 

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?