JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="relative">
            <div class="custom-select">Sélectionnez une ville de départ</div>
            <ul class="customSelect">
              <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...

CSS

/* line 2166, ../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: 80%;
  font-size: 13px;
  z-index: 2;
}
/* line 2181, ../sass/screen.scss */
.customSelect .title {
  margin-bottom: 0px !important;
}
/* line 2184, ../sass/screen.scss */
.customSelect:hover {
  cursor: pointer;
}
/* line 2187, ../sass/screen.scss */
.customSelect li:not(.title):not(.separ):hover {
  background-color: #3399ff;
  color: white;
}
/* line 2191, ../sass/screen.scss */
.customSelect .title:hover {
  background-color: none;
}

/* line 2196, ../sass/screen.scss */
.separ:hover {
  background-color: none;
}

/* line 2201, ../sass/screen.scss */
.customSelect > li:not(.topDes) {
  padding-left: 10px;
}
/* line 2204, ../sass/screen.scss */
.customSelect li {
  position: relative;
  list-style: none;
  line-height: 25px;
  left: 0;
  top: 0;
}

/* line 2213, ../sass/screen.scss */
.separ {
  height: 10px;
}

/* line 2217, ../sass/screen.scss */
.title {
  font-weight: 900;
}

/* line 2221, ../sass/screen.scss */
.topDes:before {
  content: "TOP";
  float: left;
  color: White;
  background: #fdb714;
  font-size: 12px;
  padding: 0px 5px;
  margin-right: 10px;
}

/* line 2231, ../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 2243, ../sass/screen.scss */
.custom-select:before {
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  background: #00aadb;
  width: 30px;
  height: 100%;
}
/* line 2252, ../sass/screen.scss */
.custom-select:after {
  position: absolute;
  right: 11px;
  top: 13px;
  border-top: 6px solid #fff;
  border-left: 4px solid...

JavaScript

//Rajouter l'effet d'hover ?
$('.custom-select').click(function(){
  $('ul>li:not(.not)').removeClass('hoverLi'); //BOF
  var toScroll = $(this).next('.customSelect');
  var res = "";
  document.onkeydown = f;
  // Ajouter Up/Down + Uniquement si keyCode = [A-Z];
  function f(e){
    if (e.keyCode == 8){
      e.preventDefault();
      res = "";
    } else if (e.keyCode == 13) { // Enter
			if($('li').hasClass('hoverLi')){
      	$('.clicked').text($('.hoverLi').text());
        $('.customSelect:visible').fadeOut(350);
        $('.clicked').removeClass('clicked');
			}
    } else if (e.keyCode == 40){ //Down
      scrollDown();
    } else if (e.keyCode == 38){ //Up
    	scrollUp();
    } else{
    	res += String.fromCharCode(e.keyCode);
      console.log(res);
   	  scrollToLi(search(res));
    } 
  }
  
  /* Tri les correspondances et affiche la première */
  function search(res){
  	$('ul>li:not(.not)').removeClass('hoverLi'); //BOF
  	var matchedVille = [];
    matchedVille = $('ul>li:not(.not)').filter(function(){
    	var regExp = new RegExp ("^ "+res.toLowerCase().sansAccent());
    	return this.innerHTML.toLowerCase().sansAccent().match(regExp);
    });
    console.log($(matchedVille[0]));
    $(matchedVille[0]).addClass('hoverLi'); //BOF
    return $(matchedVille[0]).position().top;
  }

	/* Retrait des accents */
	String.prototype.sansAccent = function(){
    var accent = [
        /[\300-\306]/g, /[\340-\346]/g, // A, a
        /[\310-\313]/g, /[\350-\353]/g, // E, e
        /[\314-\317]/g, /[\354-\357]/g, // I, i
        /[\322-\330]/g, /[\362-\370]/g, // O, o
        /[\331-\334]/g, /[\371-\374]/g, // U, u
        /[\321]/g, /[\361]/g, // N, n
        /[\307]/g, /[\347]/g, // C, c
    ];
    var noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
    var str = this;
    for(var i = 0; i < accent.length; i++){
        str = str.replace(accent[i], noaccent[i]);
    }     
    return str;
}
  
	/* Scroll au niveau de la recherche */
 ...