JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div class="search-content">
  <div class="relative">
    <div class="custom-select"></div>
    <ul class="customSelect" style="display: none;">
      <li class="title not" data-value="TOPDEP"> Top Villes de départ</li>
      <li class="topDes" data-value="PAR"> Paris</li>
      <li class="topDes" data-value="LYS"> Lyon</li>
      <li class="topDes" data-value="NTE"> Nantes</li>
      <li class="topDes" data-value="MRS"> Marseille</li>
      <li class="topDes" data-value="TLS"> Toulouse</li>
      <li class="topDes" data-value="BOD"> Bordeaux</li>
      <li class="topDes" data-value="LIL"> Lille</li>
      <li class="separ not" data-value=""></li>
      <li class="title not" data-value="0">Toute les villes de départ</li>
      <li data-value="QXB"> Aix en Provence (Gare SNCF)</li>
      <li data-value="AJA"> Ajaccio</li>
      <li data-value="ANE"> Angers</li>
      <li data-value="QXG"> Angers (Gare SNCF)</li>
      <li data-value="AVN"> Avignon</li>
      <li data-value="XZN"> Avignon (Gare SNCF)</li>
      <li data-value="BSL"> Bâle (CH)</li>
      <li data-value="EAP"> Bâle/Mulhouse (CH)</li>
      <li data-value="BCN"> Barcelone (ES)</li>
      <li data-value="BIA"> Bastia</li>
      <li data-value="EGC"> Bergerac</li>
      <li data-value="BIQ"> Biarritz</li>
      <li data-value="BIO"> Bilbao (ES)</li>
      <li data-value="BOD"> Bordeaux</li>
      <li data-value="ZFQ"> Bordeaux (Gare SNCF)</li>
      <li data-value="BES"> Brest</li>
      <li data-value="BVE"> Brive La Gaillarde</li>
      <li data-value="BRU"> Bruxelles (BE)</li>
      <li data-value="ZYR"> Bruxelles - (Gare du Midi) (BE)</li>
      <li data-value="CFR"> Caen</li>
      <li data-value="XIZ"> Champagne-Ardenne (Gare SNCF)</li>
      <li data-value="CRL"> Charleroi (Aéroport Gosselies) (BE</li>
      <li data-value="CER"> Cherbourg</li>
      <li...

CSS

.relative {
  position: relative;
}


/* line 2050, ../sass/screen.scss */

.customSelect {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: Arial;
  display: none;
  border: 1px solid #838383;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #F5F5F5;
  width: 90%;
  font-size: 13px;
  z-index: 2;
}


/* line 2065, ../sass/screen.scss */

.customSelect .title {
  margin-bottom: 0px !important;
}


/* line 2068, ../sass/screen.scss */

.customSelect:hover {
  cursor: pointer;
}


/* line 2071, ../sass/screen.scss */

.customSelect li:not(.title):not(.separ):hover {
  background-color: #3399ff;
  color: white;
}


/* line 2075, ../sass/screen.scss */

.customSelect .title:hover {
  background-color: none;
}


/* line 2080, ../sass/screen.scss */

.separ:hover {
  background-color: none;
}


/* line 2085, ../sass/screen.scss */

.customSelect > li:not(.topDes) {
  padding-left: 10px;
}


/* line 2088, ../sass/screen.scss */

.customSelect li {
  position: relative;
  list-style: none;
  line-height: 25px;
  left: 0;
  top: 0;
}


/* line 2097, ../sass/screen.scss */

.separ {
  height: 10px;
}


/* line 2101, ../sass/screen.scss */

.title {
  font-weight: 900;
}


/* line 2105, ../sass/screen.scss */

.topDes:before {
  content: "TOP";
  float: left;
  color: White;
  background: #fdb714;
  font-size: 12px;
  padding: 0px 5px;
  margin-right: 10px;
}


/* line 2115, ../sass/screen.scss */

.custom-select {
  background-color: #F5F5F5;
  color: #838383;
  display: inline-block;
  line-height: 32px;
  padding: 0 10px;
  position: relative;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-family: Arial;
}


/* line 2127, ../sass/screen.scss */

.custom-select:before {
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  background: #00aadb;
  width: 30px;
  height: 100%;
}


/* line 2136, ../sass/screen.scss */

.custom-select:after {
  position: absolute;
  right:...

JavaScript

$('.custom-select').click(function() {
  var res = "";
  document.onkeydown = f;
  /* Creat a String of what we are looking for */
  function f(e) {
    clearTimeout(f);

    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode == 8) {
      res = res.slice(0, -1);
    } else {
      res += String.fromCharCode(e.keyCode);
      if (res.length > 5) {
        res = "";
      }
    }
    console.log(res);
    filterLiElements(res);
    setTimeout(f, 3000);
  }
  /* Half working ? */
  function filterLiElements(text) {
    $('#customSelect > li').each(function() {
      if ($(this).text().toUpperCase().search(res) > -1) {
        $(this).show();
      } else {
        $(this).hide();
        console.log('hide');
      }
    });
  }
})


/*****  THE CODE BELOW IS JUST FOR PRESENTATION AND IS WORING WELL ****/

$(document).ready(function() {
  $('.custom-select').click(function(e) {
    e.stopPropagation();
    $('.customSelect:visible').fadeOut(350);
    $('.clicked').removeClass('clicked');
    $(this).next($('.customSelect')).fadeIn(350);
    $(this).addClass('clicked');
  });

  $('body').click(function(e) {
    $('.customSelect:visible').fadeOut(350);
  });

  $(document).on('click', 'li:not(.not)', function() {
    $('.clicked').text($(this).text());
    $('.clicked').removeClass('clicked');
  });
});
/* Gestion click on other */
/* Maël check : Sauf pour la value préselectionnée */
jQuery(document).ready(afficheSelect); /* Fonction d'affichage des valeurs séléctionnés (propre au theme) */
function afficheSelect() {
  $('select').on('keyup change', function() {
    $(this).next('span').empty(); /* Vide le span en cas de changement */
    $(this).next('span').append($(this).find('option:selected').text()); /* Affiche le numéro sélectionné */
  });
}