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.
P.S: This code may not work correctly in Google Chrome Browser initially.
17 thoughts on “Using jQuery’s AutoComplete in Salesforce – Part 1”
Reblogged this on Sutoprise Avenue, A SutoCom Source.
Hey this is not working for please let me know if there are some prerequirements to perform auto complete
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.
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
i have also tried all your code in separate class and vf page but did not get the desired output.
Anshuman, I have changed the protocols for the jQuery library to https, it should now work without any problem. Please check and let me know.
I have already changed those …but still not able to find desired results… do i need to create a component for that.
Can you check in the browser console for any error messages?
//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.
i have corrected it.. now its showing Use of getPreventDefault() is deprecated. Use defaultPrevented instead. should i need to use updated version of jquery?
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
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’];
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’.
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.