Javascript select filter

Javascript select filter

by zerrax

HTML

<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <button>Add</button>
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a onclick="f(this)" href="#_1btcxe">_1btcxe</a>
<a onclick="f(this)" href="#acx">acx</a>
<a onclick="f(this)" href="#adara">adara</a>
<a onclick="f(this)" href="#allcoin">allcoin</a>
<a onclick="f(this)" href="#anxpro">anxpro</a>
<a onclick="f(this)" href="#bcex">bcex</a>
<a onclick="f(this)" href="#bequant">bequant</a>
<a onclick="f(this)" href="#bibox">bibox</a>
<a onclick="f(this)" href="#bigone">bigone</a>
<a onclick="f(this)" href="#binance">binance</a>
<a onclick="f(this)" href="#binanceje">binanceje</a>
<a onclick="f(this)" href="#binanceus">binanceus</a>
<a onclick="f(this)" href="#bit2c">bit2c</a>
<a onclick="f(this)" href="#bitbank">bitbank</a>
<a onclick="f(this)" href="#bitbay">bitbay</a>
<a onclick="f(this)" href="#bitfinex">bitfinex</a>
<a onclick="f(this)" href="#bitfinex2">bitfinex2</a>
<a onclick="f(this)" href="#bitflyer">bitflyer</a>
<a onclick="f(this)" href="#bitforex">bitforex</a>
<a onclick="f(this)" href="#bithumb">bithumb</a>
<a onclick="f(this)" href="#bitkk">bitkk</a>
<a onclick="f(this)" href="#bitlish">bitlish</a>
<a onclick="f(this)" href="#bitmart">bitmart</a>
<a onclick="f(this)" href="#bitmax">bitmax</a>
<a onclick="f(this)" href="#bitmex">bitmex</a>
<a onclick="f(this)" href="#bitso">bitso</a>
<a onclick="f(this)" href="#bitstamp">bitstamp</a>
<a onclick="f(this)" href="#bitstamp1">bitstamp1</a>
<a onclick="f(this)" href="#bittrex">bittrex</a>
<a onclick="f(this)" href="#bitz">bitz</a>
<a onclick="f(this)" href="#bl3p">bl3p</a>
<a onclick="f(this)" href="#bleutrade">bleutrade</a>
<a onclick="f(this)" href="#braziliex">braziliex</a>
<a onclick="f(this)" href="#btcalpha">btcalpha</a>
<a onclick="f(this)" href="#btcbox">btcbox</a>
<a onclick="f(this)" href="#btcchina">btcchina</a>
<a onclick="f(this)" href="#btcmarkets">btcmarkets</a>
<a...

CSS

body {
  font-size: 14px;
  font-family: arial;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 14px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  background-image: url('https://www.w3schools.com/howto/searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
  width:100%;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
  width:100%;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f6f6f6;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  width:100%;
}
.dropdown-content > button{
  position: absolute;
  right: 0;
  padding: 15px 20px 14px 20px;
  border:none;
  cursor: pointer;
}
.dropdown-content > button:hover{
  background:rgba(0,0,0,0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

JavaScript

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
function f(t)
{
	document.getElementById("myInput").value = t.innerText;
}
function a(t)
{
	document.getElementById("myInput").value = t.innerText;
}