Using Twin Box MultiSelect Jquery Plugin in Visualforce

twinBoxMultiSelectList.page.html

<apex:page controller="twinBoxMultiSelectList_Ctlr" showHeader="false" sidebar="false"> 
    
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.twinBoxMultiSelectList, 'plugin.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.twinBoxMultiSelectList, 'plugin.css')}"/>
    
    <style>
        .boldLabel {
            font-weight : bold;
            font-size : 110%;
        }
    </style>
    <apex:sectionHeader subtitle="Twin Box Multi Select List" title="Demo"/>
    
    <apex:form id="contactForm">
        <apex:pageBlock >
            <apex:pageBlockButtons location="top"> 
                <apex:commandButton action="{!onContactSelection}" value="Done Selecting" reRender="contactForm"/>
            </apex:pageBlockButtons>
            
            <apex:selectList id="contactPickList" value="{!selectedContactIds}"
                 multiselect="true">
                <apex:selectOptions value="{!contactOptions}"/>
            </apex:selectList>
            
            <apex:pageBlockSection columns="1" title="Search Contacts">
                 <apex:outputPanel >
                      <input type="text" value="" id="searchTextBox"/>
                </apex:outputPanel>                
            </apex:pageBlockSection>

            <apex:pageBlockSection columns="1" title="Select Contacts">
                <apex:pageMessage summary="Please click on the Contact name in the lists to swap" severity="info" strength="1" />
                <apex:panelGrid columns="2">
                    <apex:outputLabel value="Available Contacts"  styleClass="boldLabel"/>
                    <apex:outputLabel value="Selected Contacts" styleClass="boldLabel"/>

                    <apex:outputPanel id="availableContactsContainer" />
                    <apex:outputPanel id="selectedContactsContainer" />
                </apex:panelGrid>
            </apex:pageBlockSection>
           
           
           <apex:pageBlockSection title="Selected Contacts">
               
               <apex:pageBlockTable value="{!selectedContacts}" var="selCon" rendered="{!NOT(ISBLANK(selectedContacts))}">
                   <apex:column value="{!selCon.Id}"/>
                   <apex:column value="{!selCon.Name}"/>
               </apex:pageBlockTable>           
           </apex:pageBlockSection>
       </apex:pageBlock>
    
        <script type="text/javascript">
           $j = jQuery.noConflict();
           $j(document).ready(
               function() {
                    $j('select[id$=contactPickList]').twinBoxMultiSelectList({
                            availableList : 'span[id$=availableContactsContainer]',
                            selectedList : 'span[id$=selectedContactsContainer]',
                            searchBox : '#searchTextBox',
                            styles: {
                                width: '220px'
                            }
                        });
           });
    
    
        </script>
    </apex:form>
    
</apex:page>

twinBoxMultiSelectList_Ctlr.cls.java

public with sharing class twinBoxMultiSelectList_Ctlr {
    // Selectoptions for picklist
    public List<SelectOption> contactOptions {get;set;}
    // User selection from UI
    public List<Id> selectedContactIds {get;set;}

    // Used to show select contacts
    public transient List<Contact> selectedContacts {get;set;}
    
    public twinBoxMultiSelectList_Ctlr() {
        contactOptions = new List<SelectOption>();
        Contact[] contacts = [Select Id, Name from Contact];
        for (Contact c : contacts) {
            contactOptions.add(new SelectOption(c.Id, c.Name));
        }
    }
    

    public void onContactSelection() {
        if (selectedContactIds != null && !selectedContactIds.isEmpty()) {
            selectedContacts = [Select Id, Name from Contact where Id IN :selectedContactIds];
        }
    }
    
}