JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="md-select">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <label for="ul-id"><button type="button" class="ng-binding">Choose your country</button></label>
  <ul role="listbox" id="ul-id" class="md-whiteframe-z1" aria-activedescendant="state2_AK" name="ul-id">
<input type="text" id="filter" class="searchFilter" placeholder="Type to filter" />
<a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Afghanistan</li></a>
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Albania</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Algeria</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Andorra</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Angola</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Antigua & Deps</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Argentina</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Armenia</li></a> 
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Australia</li></a>
    <a href="#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Austria</li></a> 
    <a href="h#"><li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Azerbaijan</li></a> 
    <a href="#"><li role="option" id=""...

CSS

.md-select ul::-webkit-scrollbar {
    width: 12px;
}

.md-select ul::-webkit-scrollbar-track {
    -webkit-box-shadow: none !important; 
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    background: #fff;
}

.md-select ul::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    background: rgb(242, 124, 37) !important; 
    height: 30px;
}
.md-select {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    margin: 10px 0 8px 0;
    padding-bottom: 2px;
    max-width: 400px;
    width: 100%;
    z-index: 999;
}
.md-select *, .md-select :after, .md-select :before {
    box-sizing: border-box;
}
.md-select [type=button] {
    background: #333;
    color: #fff;
    cursor: default;
    display: block;
    line-height: 48px;
    padding: 2px 0 1px 16px;
    position: relative;
    text-align: left;
    text-shadow: none;
    width: 100%;
    z-index: 1;
    outline: none;
    overflow: hidden;
    border: none;
    border-bottom: 3px solid #000;
}

.md-select.overview [type=button] {
    color: #000;
    border-bottom: 3px solid #f27c25;
}

.md-select.overview ul[role=listbox] {
    border: none;
}

.md-select.overview.active ul {
    border: 2px solid #f27c25;
}

.md-select [type=button]:focus, .md-select [type=button]:hover {
    background: rgba(0, 0, 0, 0.1);
}
.md-select [type=button]:after {
    content: '\25be';
    float: right;
    padding-right: 16px;
    color: #000;
}
.md-select ul[role=listbox] {
    cursor: default;
    list-style: none;
    line-height: 26px;
    overflow: hidden;
    margin: 0;
    max-height: 0;
    position: absolute;
    padding: 0;
    -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
    transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
    width: 100%;
    border: 2px solid #f27c25;
    box-shadow: none !important;
   ...

JavaScript

$('input#filter').on('click', function(){
  if ($('.md-select').hasClass("active")) {
    $('.md-select').addClass("active");
  }
  else {
  $('.md-select').removeClass("active");
  }
  /* $(this).toggleClass('active') */
  })
  
  $('.md-select').on('click', function(){
  $(this).toggleClass('active')
  })

$('.md-select ul li').on('click', function() {
  var v = $(this).text();
  $('.md-select ul li').not($(this)).removeClass('active');
  $(this).addClass('active');
  $('.md-select label button').text(v)
})

$(document).mouseup(function(e) 
{
    var container = $(".md-select");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.removeClass('active');
    }
});

var filter = document.getElementById('filter');
var list = document.getElementById('ul-id');
var listItems = list.querySelectorAll('li');

//filter.focus();

filter.addEventListener('keyup', function(e) {
  var val = new RegExp(e.target.value, 'gi');
  for(var i=0; i<listItems.length; i++) {
    if( e.target.value.length > 0) {
      var text = listItems[i].innerHTML;
    
      if( !text.match(val)) {
        listItems[i].classList.add('is-hidden');
      } else {
        listItems[i].classList.remove('is-hidden');
      }
    } else {
      listItems[i].classList.remove('is-hidden');
    }
    
  }
});