Editable Selection Box

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-grid">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="film">
    <label class="mdl-textfield__label" for="film">Film...</label>
      <select>
        <option>Fight Club</option>
        <option>Howl's Moving Castle</option>
        <option>Life Is Beautiful</option>
    </select>
  </div>
  <button class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons">list</i>
  </button>
</div>

CSS

select {
  border: 0;
  position: absolute;
  top: 50px;
  display: none;
}

option {
  font-size: 16px;
}

JavaScript

const $button = document.querySelector('button');
const $select = document.querySelector('select');
const $input = document.querySelector('input');

$button.addEventListener('click', function() {
  if (!$select.style.display) {
    $select.style.display = 'block';
    $select.size = $select.querySelectorAll('option').length;
  } else $select.style.display = '';
});

$select.addEventListener('change', function() {
  $input.value = this.value;
  $input.parentNode.classList.add('is-dirty');
  $select.style.display = '';
});