Let's take another open source JavaScript library, Select2 (https://select2.Org/), which provides functionality to autocomplete and allow the user to add multiple selections to an input.
The source code for this library can be downloaded from the Select2 Git repository (https://github.com/select2/select2/releases).
The example HTML code to integrate Select2, giving us the ability to add multiple choices to the input, is as follows:
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<select multiple="multiple" id="states" class="js-example-basic-multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<input type="button" id="submit" value="Submit">click
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
</body>
</html>
To integrate this library with Lightning Components, we will follow the same three steps listed in the previous section:
- Create a static resource hosting third-party library: download the ZIP file used inside the Salesforce static resource from the git link provided at https://github.com/PacktPublishing/Learning-Salesforce- Lightning-Application-Development/blob/master/chapter7/libraries/Select2.zip.
- Use the ltng:require tag and leverage the afterScriptsLoaded event to load the JavaScript files and styles. The component code is shown in the following code snippet. Let's name the component file select2.cmp:
<!--select2.cmp-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="selectedStates" type="String[]" default="[]" />
<ltng:require styles="{!$Resource.Select2 + '/Select2/select2.min.css'}" scripts="{!join(',', $Resource.Select2 + '/Select2/jquery-1.8.3.js', $Resource.Select2 + '/Select2/select2.min.js')}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<select id="states" class="js-example-basic-multiple" name="states[]" multiple="multiple" style="display:block;width: 100%">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">GeOrgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<div class="slds-align_absolute-center" style="height: 5rem;">
< Lightning:button variant="brand" label="Display Selected States" onclick="{!c.handleClick}" />
</div>
Selected States
<ul class="slds-has-dividers_around-space">
<aura:iteration var="state" items="{!v.selectedStates}">
<li class="slds-item">{!state}</li>
</aura:iteration>
</ul>
</aura:component>
- Use third-party JavaScript functions and code in the afterScriptsLoaded function. The controller code will be the code that's inside the <Script> tags:
({
afterScriptsLoaded : function(component, event, helper) {
$('.js-example-basic-multiple').select2();
},
handleClick : function(component, event, helper) {
var selectedItems = $("#states").val();
component.set("v.selectedStates",selectedItems);
console.log(selectedItems);
}
})
Note that the handleClick function is called from the button, retrieves the selected values from the input, and stores them in the Lightning attribute.
Create a small test app to test this component. The test app's code is as follows:
<aura:application extends="force:slds">
<c:select2 />
</aura:application>
A functional component screen would look like the following screenshot:
