JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<select name="a" multiple="multiple"><option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Norfolk Island">Norfolk Island</option><option value="Northern Mariana Islands">Northern Mariana Islands</option><option value="Norway">Norway</option><option value="Oman">Oman</option><option value="Pakistan">Pakistan</option><option value="Yemen">Yemen</option><option value="Zambia">Zambia</option><option value="Zimbabwe">Zimbabwe</option></select>

CSS

body {font: 11px georgia;}

li.selectable {
// color: blue;
}

input { display: block; }

.match {
color: green;
}

.notmatch {
color: red;
}

JavaScript

//add :Contains selector that is case-insensitive
jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};


$('select[multiple]').each(function() {
    var $this = $(this);

    var $searchField = $('<input id="search" type="text">');
    var $optionList = $('<ul class="" />');

    $this.find('option').each(function() {

        $optionList.append('<li class="selectable">' + $(this).text() + '</li>')

    });

    $searchField.insertAfter($this);
    $optionList.hide().insertAfter($searchField);
        
        
        $searchField.on('focus', function(){
            $optionList.slideDown(200);
        });

        $searchField.on('keyup', function(){
            
            var searchVal = $searchField.val();
            // console.log($(this).val());
            //console.log($searchField.val());
            console.log(searchVal);
                            
            
                var $allItems = $optionList.find('li');
//                var $hits = $optionList.find('li:Contains('+searchVal+')');
            
            var $hits = $optionList.find('li'+ ((searchVal.length) ? ':Contains('+searchVal+')' : ''));
                var $misses = $allItems.not($hits);

            

            if ( !searchVal.length ) { 
                $allItems.removeClass('match');
            } else {
                
                                                   $hits.addClass('match');
$misses.removeClass('match');
//               $hits.removeClass('notmatch').addClass('match');
  //              $misses.removeClass('match').addClass('notmatch');
            
            }
        });

        




});