<h3>Drop-Down list search using Datalist</h3>
<h4>Input your favorite Text Editor</h4>
<input list=text_editors>
<button>▼</button>
<datalist id="text_editors">
    <select multiple size=8>
      <option value="Atom">Atom
      <option value="Brackets">Brackets		
      <option value="Notepad ++">Notepad ++
      <option value="Notepad">Notepad
      <option value="Sublime Text">Sublime Text
      <option value="TextEdit">TextEdit
      <option value="TextMate">TextMate
      <option value="Wordpad">Wordpad
    </select>
  </datalist>

body {
  text-align: center;
}

body,
input,
button {
  font-family: palatino;
  font-size: 12pt;
}

input {
  width: 250px;
  height: 30px;
  padding: 3px;
  border: 1px solid #DDE1E4;
}

select {
  width: 258px;
  position: relative;
  left: -17px;
  margin: 0;
  border: 1px solid #DDE1E4;
  border-top: none;
  font-size:9pt;
}

datalist {
  display: none;
}

option {
  padding: 3px;
}

option:hover {
  background-color: #11E8EA;
}

button {
  width: 30px;
  height: 38px;
  position: relative;
  left: -5px;
  border: 1px solid #DDE1E4;
  border-left: none;
  background-color: #11E8EA;
  cursor: pointer;
}

h3,
h4 {
  text-align: center;
}


/* to hide datalist arrow in webkit */

input::-webkit-calendar-picker-indicator {
  display: none;
}

button = document.querySelector('button');
datalist = document.querySelector('datalist');
select = document.querySelector('select');
options = select.options;

/* on arrow button click, show/hide the DDL*/
button.addEventListener('click', toggle_ddl);

function toggle_ddl() {
  if (datalist.style.display === '') {
    datalist.style.display = 'block';
    this.textContent = "▲";
    /* If input already has a value, select that option from DDL */
    var val = input.value;
    for (var i = 0; i < options.length; i++) {
      if (options[i].text === val) {
        select.selectedIndex = i;
        break;
      }
    }
  } else hide_select();
}

/* when user selects an option from DDL, write it to text field */
select.addEventListener('change', fill_input);

function fill_input() {
  input.value = options[this.selectedIndex].value;
  hide_select();
}

/* when user wants to type in text field, hide DDL */
input = document.querySelector('input');
input.addEventListener('focus', hide_select);

function hide_select() {
  datalist.style.display = '';
  button.textContent = "▼";
}