function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Uttpal chandraUttpal chandra 

Select2 or Searchable dropdown

Hi all,
 
I want to implement searchable dropdown or select2  in my vf page in apex:selectList but when i use jquery of Select2 it is not workig.

I tried by both giving static resource and also  used <script src> but nothing is working any one know what i am doing wrong?

Thnaks in advance
 
Best Answer chosen by Uttpal chandra
Khan AnasKhan Anas (Salesforce Developers) 
Hi Uttpal,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
 
<apex:page standardStylesheets="false" standardController="Account" recordSetVar="accounts" showHeader="false" docType="html-5.0" >
    
    <head>
        <!-- stylesheets -->
        <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
        <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
        
        <style type="text/css">
            body {
            padding: 40px;
            }
        </style>
        
        <!-- scripts -->
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js" />
            
        <script>    
            $(document).ready(function(){
                $('select[id$=select2id]').select2();
            });
        </script>
    </head>
    
    <body>
        <p><b>Select2 Example :</b></p>
    </body>
    
    <apex:form>
        <apex:pageBlock>
            <apex:selectList id="select2id" value="{!filterId}" size="1">
                <apex:selectOptions value="{!listviewoptions}"/>
            </apex:selectList>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Screenshot:
User-added image

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Uttpal,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
 
<apex:page standardStylesheets="false" standardController="Account" recordSetVar="accounts" showHeader="false" docType="html-5.0" >
    
    <head>
        <!-- stylesheets -->
        <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
        <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
        
        <style type="text/css">
            body {
            padding: 40px;
            }
        </style>
        
        <!-- scripts -->
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js" />
            
        <script>    
            $(document).ready(function(){
                $('select[id$=select2id]').select2();
            });
        </script>
    </head>
    
    <body>
        <p><b>Select2 Example :</b></p>
    </body>
    
    <apex:form>
        <apex:pageBlock>
            <apex:selectList id="select2id" value="{!filterId}" size="1">
                <apex:selectOptions value="{!listviewoptions}"/>
            </apex:selectList>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Screenshot:
User-added image

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Akash Kesarwani 7Akash Kesarwani 7
This would fail for more than 1000 records, any solution for that?