Salesforce JQuery AutoComplete Dropdown

Thursday, March 4, 2010 by Aslam - The Alexendra
Hi All
In previous 3 months i came across same type of Task in different projects. That is "AutoComplete Dropdown Textbox" for Account, Contact or different types of SObjects (Custom Objects).

I used JQuery Autocomplete plugin for this task here. It was working perfectly. But i was tired to do same stuff again and again from scratch like uploading jquery resources (js, css), making component, making class, integrate etc.

Then i decided to make it as a installable Package so that anybody can install it easily and do changes according their needs. You can install package from here

https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t40000000U2VX

This package contains following components:-

1) Resources:- JQueryDialog, popupcss, popupjs
2) VF Page:- Search, AutocompleteTest
3) Apex Class:- ACSearchController
4) Component:- AutoComplete

The "AutoComplete" VF Component is main part and contains all js, css and client side login. Search page and ACSearchContoller is your Database related stuff means which SObject you need to query and output format etc. There is a Test VF Page "AutocompleteTest". After installing you can run this VF page, it contains one simple sample for Autocomplete Example for Contact object.

Give it a try!!!

Thanks
Aslam Bari
Posted in | 20 Comments »

20 comments:

Unknown said...

Great stuff... But for this autocomplete I get html overflow: hidden and nothing comes up on my autocomplete text box... Like I see the box and the box apparently has sections but comes up with html overflow???
Any suggestions?

neha said...
This comment has been removed by the author.
anil Kumar said...

this is not working.im getting the same problem as explained above by neha

Aslam - The Alexendra said...

hi anil, can you please mail me what exactly error you getting. May be i can help you

Anonymous said...

I've found with this code, that if developer mode is turned on, the query fails. Otherwise it works great!

Anonymous said...

great as always, all the best!!!

Nandini

bikrambebarta said...

Dear Aslam...
thank u very much...I used this code in my project.. here the data is searced from Idea object. so everything works good..but when i select a value from the autocomplete drop down list i want it to show that value in the textbox.(instead it shows undefined) please please help me....


Bikram

Aslam - The Alexendra said...

Hi Bikram,
You need to check the component code, there you will see i am getting Id from the selected record by data[1]. You need to check that code also your format of result separated by '|'.

Thanks
Aslam Bari

bikrambebarta said...

Hi Aslam it is working correct now... thank you...
i had wrong in the output passing using '|'...
any way ...thanks again...

good luck to you....

Bikram

RB Chowdary said...

Hello I'm getting this Exception..............

html {
overflow:hidden;
}

Aslam - The Alexendra said...

@RB: that cause because of JS issues. I suppose you have made on "Development Mode" On on your org. First make that off then try.

bikrambebarta said...

Dear Aslam..
in an iframe i have kept this search page...and this iframe i ve in another page..
so a problem comes..that is...when the autocomplete textbox populates like dropdown it cannot overlap the parent window..so the view of a long text word sentence is not fully seen...i think you understand... so if you can help me anyway..to find the solution.. plz

Bikram

bikrambebarta said...

Dear Aslam..

i need help.. i want to search in a field of any object(not entire object) which contains a particular word.. like..
say... a word 'xyz' in the 'description' field of any object.

it ll search and if it finds it ll return the field.

thanks....

Anonymous said...

I am using the above said code in my visualforce page. I want to increase the height of the autocomplete popup. How can I do this

Nikky.Cdac said...

This one is really very helpful. Thanks :)

Anonymous said...

Thanks dude .. used your component as is and it works great .. :) .. cool stuff ..

PranavFergussonian said...

Hi Aslam , Really grate ,
Impressive work ,

I face same problem as Bikram,
I want to use the selected value where it prints 'Undefined' for selected value .
.
I already checked the value of data[1] , but didnt understand how to use , any thoughts would be appreciated , Thanks in Advance

sandeep said...

This Component show result using contains logic like if I press "a" it will give result which contains "a". I need to show result which start with "a" only

Anonymous said...

i am not able to run this page

Anonymous said...

How can I implement this feature in a public site on using Sites whithout user loging in?

Post a Comment