[SalesForce] Show comma separated values as pills in input field lightning

I have one input field which will store some value.
In that field, every comma separated value needs to be shown as a pill.
Currently I'm able to show it outside input text but not inside input text.

Component:

    <aura:component >
    <aura:attribute name="numbers" type="List"/>
    <lightning:input aura:id="myname" label="Name" name="myname" onchange="{!c.handleClick}"/>
     <div class="slds-pill_container">
  <ul class="slds-listbox slds-listbox_horizontal" role="listbox" aria-label="Selected Options:" aria-orientation="horizontal">
    <aura:iteration var="num" items="{!v.numbers}" indexVar="i">
        <li role="presentation">
      <span class="slds-pill" role="option" tabindex="0" aria-selected="true">
        <span class="slds-pill__label" title="Full pill label verbiage mirrored here">{!num}
        </span>
          <div data-index="{!i}" onclick="{!c.removePill}">
          <lightning:icon iconName="utility:close" size="xx-small" title="remove"/>
          </div>
      </span>
    </li>
      </aura:iteration>
  </ul>
</div>
</aura:component>

Controller:

({
    handleClick: function (cmp, event) {
        var invalue = cmp.find('myname');
        var todoItem = invalue.get("v.value"); 
        var myarray = todoItem.split(',');
        //console.log("invalue.."+todoItem);
        for(var i = 0; i < myarray.length; i++)
        {
            console.log("array.. "+myarray[i]);
        }
        cmp.set("v.numbers", myarray);
    },

    removePill : function(cmp,event){
        console.log("remove pill");
        var selectedItem = event.currentTarget;
        var recId = selectedItem.dataset.index;
        console.log("Data index.. "+recId);
        var num = cmp.get("v.numbers");
        num.splice(recId, 1);
        cmp.set("v.numbers", num);
        console.log("Data numbers.. "+num);
    }
})

Output:

enter image description here

Also, I need to make pill only after comma not before that, if comma is not present then it should show as text.

Best Answer

You just need to eliminate the blank value form Split array, assigned that array to Numbers.

Even for removePill , After removing Value also input value get updated.

({
    handleClick: function (cmp, event) {
        var todoItem = cmp.find('myname').get("v.value"); 
        var myarray = todoItem.split(',');
        var ValueToConsidered=[];
        var myarrayLen;
        if(todoItem.slice(-1)==',')  
            myarrayLen= myarray.length;
        else
            myarrayLen= myarray.length-1;        
        for(var i = 0; i < myarrayLen; i++)
            if(myarray[i].length >0)
                ValueToConsidered.push(myarray[i]);
        cmp.set("v.numbers", ValueToConsidered);
    },

    removePill : function(cmp,event){
        console.log("remove pill");
        var selectedItem = event.currentTarget;
        var recId = selectedItem.dataset.index;
        console.log("Data index.. "+recId);
        var num = cmp.get("v.numbers");
        num.splice(recId, 1);
        cmp.set("v.numbers", num);
        cmp.find('myname').set("v.value",num.join());
        console.log("Data numbers.. "+num);
    }
})
Related Topic