Show comma separated values as pills in input field lightning

Question

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:

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

Answer 1

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);
    }
})