Lightning Pill as Output Text

Question

I have a component having multiple values.The multiple values are coming properly in the input text box. I want to show the values selected from the list as lightning pills.

My Component Code is :-

<aura:attribute name="picklistOptsList" type="String[]"/>

<ui:inputSelect multiple="true" 
                class="multiple"
                aura:id="InputSelectMultiple" 
                change="{!c.onMultiSelectChange}" value="">

    <ui:inputSelectOption text="Any"/>
    <ui:inputSelectOption text="Open"/>
    <ui:inputSelectOption text="Closed"/>
    <ui:inputSelectOption text="Closed Won"/>
    <ui:inputSelectOption text="Prospecting"/>
    <ui:inputSelectOption text="Qualification"/>
    <ui:inputSelectOption text="Needs Analysis"/>
    <ui:inputSelectOption text="Closed Lost"/>

</ui:inputSelect> 

<ui:inputText class="result" aura:id="multiResult" value="{!v.picklistOptsList}" />

My Controller Code is :-

onMultiSelectChange: function(component, event) {
    debugger;
    var selectedValue= event.getSource().get("v.value");
    component.set("v.picklistOptsList", selectedValue); 
    console.log('you selected :'+selectedValue);
 },

Answer 1

First you have to split the selected values by semicolon in the controller (before assigning them to attribute) then you can use aura:iteration to create the lightning:pill s.

Component Markup

<aura:component >
    <aura:attribute name="picklistOptsList" type="String[]"/>
    <ui:inputSelect multiple="true" 
                    class="multiple"
                    aura:id="InputSelectMultiple" 
                    change="{!c.onMultiSelectChange}" value="">

        <ui:inputSelectOption text="Any"/>
        <ui:inputSelectOption text="Open"/>
        <ui:inputSelectOption text="Closed"/>
        <ui:inputSelectOption text="Closed Won"/>
        <ui:inputSelectOption text="Prospecting"/>
        <ui:inputSelectOption text="Qualification"/>
        <ui:inputSelectOption text="Needs Analysis"/>
        <ui:inputSelectOption text="Closed Lost"/>
    </ui:inputSelect>
    <br></br>
    <ui:inputText class="result" aura:id="multiResult" value="{!v.picklistOptsList}" />
    <br></br>
    <ul class="slds-listbox slds-listbox_inline slds-p-top_xxx-small" role="group" aria-label="Inputted Options:">
        <aura:iteration items="{!v.picklistOptsList}" var="sr">
            <li role="presentation" class="slds-listbox__item">
                <lightning:pill class="slds-m-around_xx-small" label="{!sr}"/>
            </li>
        </aura:iteration>
    </ul>
</aura:component>

Client Controller

({
    onMultiSelectChange: function(component, event) {
        debugger;
        var selectedValue= event.getSource().get("v.value");
        var str_array = selectedValue.split(';');
        component.set("v.picklistOptsList", str_array); 
        console.log('you selected :'+selectedValue);
    }
})

Screenshot