0

I am trying to implement the searchable pick-list in lightning component. I followed this post to implement with help of external jQuery select2. Does any one suggest me the best way of implementing searchable picklist in lightning component.

xxx.cmp

<aura:component access="global">
    <ltng:require styles="{!$Resource.select2}" />
    <ltng:require scripts="{!$Resource.select2}"
                  afterScriptsLoaded="{!c.loadJquery}" />
    <select class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="xx">xx</option>
        <option value="yy">yy</option>
        <option value="zz">zz</option>
        <option value="rr">rr</option>
        <option value="tt">tt</option>
        <option value="mm">mm</option>
    </select>
</aura:component>

xxx.js

({
    loadJquery : function(component, event, helper) {
        jQuery(document).ready(function(){
            $('.js-example-basic-single').select2();
        });
    }
})

Improve this question

1 Answer 1

Reset to default
2

Looks like jquery issue. This can be resolved by

  1. Use jquery version https://code.jquery.com/jquery-2.2.4.min.js
  2. Use Select2 library from https://github.com/select2/select2/archive/4.0.3.zip

Zip both library and upload as single static resource. You can also upload separately.

Aura component code will be 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ltng:require styles="{!$Resource.select2+ '/select2.min.css'}"
                   scripts="{!join(',',$Resource.select2 + '/jquery-2.2.4.min.js', $Resource.select2 + '/select2.min.js')}"
          afterScriptsLoaded="{!c.loadJquery}"/>

    <select name="state" class="select2Class" style="width:100%">
        <option value="">Please select</option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="xx">xx</option>
        <option value="yy">yy</option>
        <option value="zz">zz</option>
        <option value="rr">rr</option>
        <option value="tt">tt</option>
        <option value="mm">mm</option>
    </select>
</aura:component>

JS Controller

({
    loadJquery : function(component, event, helper) {
        jQuery(document).ready(function(){
            $(".select2Class").select2({
               placeholder: "Select Multiple values"
           });
        });
    }
})
Improve this answer
4
  • the issue is sometime it's not working @Dhanik
    – Ajith Kumar
    Aug 11, 2019 at 4:34
  • If i need to call doinit method. which is the best way to do this from component <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> or from loadjquery method. var a = component.get('c.doinit'); $A.enqueueAction(a);
    – Ajith Kumar
    Aug 11, 2019 at 4:40
  • If you need to call any method after your JS loaded then afterScriptsLoaded method is best other wise you can use aura:handler for init.
    – Dhanik Lal Sahni
    Aug 11, 2019 at 4:46
  • Hi @Dhanik Lal Sahni , Everything is working fine but if i click pick-list it's taking some time to display the drop-down. it's possible to make it faster as soon as i click the pick-list it should display the drop down
    – Ajith Kumar
    Aug 12, 2019 at 6:53

Not the answer you're looking for? Browse other questions tagged .