Posted on November 9, 2016
If you find yourself using Salesforce for Visualforce pages, you may run into a couple of limitations for drop-down boxes in forms. Primary among those: drop-downs with many choices are difficult to navigate. Many users get frustrated sorting through many choices, and it can be difficult to find a value if you don’t know the exact spelling.
This post will walk through steps I recently took to make searchable drop-downs in basic Salesforce Visualforce pages, in my case to search through a long drop-down of universities.
Salesforce calls its drop-downs picklists, and we need to set one up to demonstrate searchable picklists. In my developer account, I created a field called University, and populated it from a list of accredited US institutions. (This list is huge, by the way! Only the first 500 or so universities actually fit into my list, but no matter.) Let’s set up a basic Visualforce page to get started.
That gets us a normal Salesforce-style drop-down:
We could use this for data entry, but it’s hard to find the right university in this long list, and if I’m not certain how choices in the drop-down are spelled and organized, I might not find a match at all! (Is it THE Ohio State University or just Ohio State?)
Select2 has documentation on what it’s doing, but we can easily include it in a Visualforce page by including a few new links. Here are the CDN versions of those links: (You could also host them in a Salesforce org as a static resource.)
Now let’s go back and tag our
inputField with our new class:
Voila! Click on the image to see our searchable drop-down in action.