JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<input type="text" id="js-news-categories"/>

<div class="js-categories_select" style="margin-top:100px;">

</div>

JavaScript

var availableTags = [
 {
   id:1,
   value:"php"
 },
  {
   id:2,
   value:"java"
 },
  {
   id:3,
   value:"Asp.net"
 }
]

function triggerAutoComplete() {
$( "#js-news-categories" ).autocomplete({
        minLength: 0,  
        source: function(){
          return 
        },
        multiselect: true,
        autoFocus: true,
        focus: function( event, ui ) {
        return false;
        },
        select: function( event, ui ) {     
        
        availableTags = jQuery.grep(availableTags, function(element) {
        return element.value != ui.item.value;
       });
        triggerAutoComplete();
        
        $( "#js-news-categories" ).val("");
        var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'">     <input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<span class="close">X</span></span>';
        $(".js-categories_select").append(catItems);         
        return false;        

        } 
        });
}

triggerAutoComplete();