Lets say you have a requirement where-in you are displaying a select-list (picklist) on a visualforce page for user selection. Based on user selection you are doing some operation. Now if this select list is too big (i.e., is list of  50+ items), then its really hard to select a particular item as visualforce select list doesn’t support searching of options inside a select list.

Inorder to provide similar functionality, I google’d and found a really nice jquery plugin – Chosen. Convert long, unwieldy select boxes much more user-friendly.

Below is simple to follow steps to incorporate same in a visualforce page.

Step1 : Import necessary Jquery+Chosen JS & CSS into Static Resource. Download @ https://github.com/harvesthq/chosen/releases

Step2 : Include above imported js and css in visualforce page

<!– Include Chosen JQuery Plugin Javascript and CSS Files –>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.jquery.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.jquery.min.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘docsupport/prism.js’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘docsupport/prism.css’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.css’)}”/>

Step3: Include script to convert select into select with search

<script>
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$(“select[id*=’IdOfSelectElement’]”).chosen();
});
<script>