{"id":2623,"date":"2013-10-01T19:55:35","date_gmt":"2013-10-01T14:55:35","guid":{"rendered":"http:\/\/www.chiragmehta.info\/chirag\/?p=2623"},"modified":"2013-10-03T12:48:18","modified_gmt":"2013-10-03T07:48:18","slug":"visualforce-jquery-select-list-with-search-feature","status":"publish","type":"post","link":"https:\/\/www.chiragmehta.info\/chirag\/2013\/10\/01\/visualforce-jquery-select-list-with-search-feature\/","title":{"rendered":"Visualforce Jquery Select List with Search feature"},"content":{"rendered":"

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 \u00a050+ items), then its really hard to select a particular item as visualforce select list doesn’t support searching of options inside a select list.<\/p>\n

Inorder to provide similar functionality, I google’d and found a really nice jquery plugin – Chosen<\/a>. Convert\u00a0long, unwieldy select boxes much more user-friendly.<\/p>\n

Below is simple to follow steps to incorporate same in a visualforce page.<\/p>\n

Step1 :<\/strong> Import necessary Jquery+Chosen JS & CSS into Static Resource. Download @\u00a0https:\/\/github.com\/harvesthq\/chosen\/releases<\/a><\/p>\n

Step2 :<\/strong> Include above imported js and css in visualforce page<\/p>\n

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

Step3: <\/strong>Include script to convert select into select with search<\/p>\n

<script>
\nj$ = jQuery.noConflict();
\nj$(document).ready(function() {
\nj$(“select[id*=’IdOfSelectElement’]”).chosen();
\n});
\n<script><\/p><\/blockquote>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u00a050+ items), then its really hard to select a particular item as visualforce select […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[159,160,143,169,158,157],"class_list":["post-2623","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-auto-complete","tag-auto-search","tag-jquery","tag-salesforce","tag-select-list","tag-visualforce","post-preview"],"_links":{"self":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/comments?post=2623"}],"version-history":[{"count":4,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2623\/revisions"}],"predecessor-version":[{"id":2625,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2623\/revisions\/2625"}],"wp:attachment":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/media?parent=2623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/categories?post=2623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/tags?post=2623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}