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

/* Al hacer clic en el botón de flecha, mostrar/ocultar el DDL */
button.addEventListener('click', toggle_ddl);

function toggle_ddl() {
  if (datalist.style.display === '') {
    datalist.style.display = 'block';
    this.textContent = "▲";
    /* Si el campo de entrada ya tiene un valor, seleccionar esa opción del 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();
}

/* Cuando el usuario selecciona una opción del DDL, escribirla en el campo de texto */
select.addEventListener('change', fill_input);

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

/* Cuando el usuario desea escribir en el campo de texto, ocultar el DDL */
input = document.querySelector('input');
input.addEventListener('focus', hide_select);

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