JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

CSS

.disabled_items{
opacity:0.4;
padding:2px 0.4em;

width:100%;
}

JavaScript

$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];

var disabledTags = ["Ruby",
"Scala",
"Scheme"];

var finalTags = [];

finalTags = jQuery.grep(availableTags , function(n, i){
var exists = false
  for(var k in disabledTags )
{
 if(disabledTags [k] == n) {exists = true;break;}
}
 if(!exists)
 return n;
});
var x=[];
$( "#tags" ).autocomplete({
source: availableTags 
}).keydown(function(){
t= $(this);
x=[];
setTimeout(function(){
t.parent().next().children().each(function(el, i) {
   
    for(var iner in disabledTags)
      {
       if($(i).find('a').text() == disabledTags[iner])
{
      $(i).removeClass('ui-menu-item').addClass('disabled_items');    
}
       }
    

});

},350)


}).change(function(){

    for(var iner in disabledTags)
      {
          if($.trim($(this).val()).toLowerCase() == disabledTags[iner].toLowerCase()){
           alert("its disabled ra jaffa na koda....");
              break;
          }
      }
      });



});