title: Custom dropdown - selecting option that starts with letter when pressing key
body: <p>This is an example taken from here: <a href="https://www.w3schools.com/howto/howto_custom_select.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_custom_select.asp</a></p>
  
  <p>This is not mirroring the default dropdown behavior. For example when pressing a key, a selection is done automatically if option is there and starts with the pressed letter.</p>
  
  <p>How could the default dropdown behavior be achieved when pressing a key?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var x, i, j, selElmnt, a, b, c;
  /* Look for any elements with the class "custom-select": */
  x = document.getElementsByClassName("custom-select");
  for (i = 0; i &lt; x.length; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    /* For each element, create a new DIV that will act as the selected item: */
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    /* For each element, create a new DIV that will contain the option list: */
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j &lt; selElmnt.length; j++) {
      /* For each option in the original select element,
      create a new DIV that will act as an option item: */
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[j].innerHTML;
      c.addEventListener("click", function(e) {
          /* When an item is clicked, update the original select box,
          and the selected item: */
          var y, i, k, s, h;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          h = this.parentNode.previousSibling;
          for (i = 0; i &lt; s.length; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              for (k = 0; k &lt; y.length; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
      });
      b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
      /* When the select box is clicked, close any other select boxes,
      and open/close the current select box: */
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
  }
  
  function closeAllSelect(elmnt) {
    /* A function that will close all select boxes in the document,
    except the current select box: */
    var x, y, i, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    for (i = 0; i &lt; y.length; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (i = 0; i &lt; x.length; i++) {
      if (arrNo.indexOf(i)) {
        x[i].classList.add("select-hide");
      }
    }
  }
  
  /* If the user clicks anywhere outside the select box,
  then close all select boxes: */
  document.addEventListener("click", closeAllSelect);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The container must be positioned relative: */
  .custom-select {
    position: relative;
    font-family: Arial;
  }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: DodgerBlue;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Surround the select box within a "custom-select" DIV element.
  Remember to set the width: --&gt;
  &lt;div class="custom-select" style="width:200px;"&gt;
    &lt;select&gt;
      &lt;option value="0"&gt;Select car:&lt;/option&gt;
      &lt;option value="1"&gt;Audi&lt;/option&gt;
      &lt;option value="2"&gt;BMW&lt;/option&gt;
      &lt;option value="3"&gt;Citroen&lt;/option&gt;
      &lt;option value="4"&gt;Ford&lt;/option&gt;
      &lt;option value="5"&gt;Honda&lt;/option&gt;
      &lt;option value="6"&gt;Jaguar&lt;/option&gt;
      &lt;option value="7"&gt;Land Rover&lt;/option&gt;
      &lt;option value="8"&gt;Mercedes&lt;/option&gt;
      &lt;option value="9"&gt;Mini&lt;/option&gt;
      &lt;option value="10"&gt;Nissan&lt;/option&gt;
      &lt;option value="11"&gt;Toyota&lt;/option&gt;
      &lt;option value="12"&gt;Volvo&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;
    &lt;select&gt;
      &lt;option value="0"&gt;Select car:&lt;/option&gt;
      &lt;option value="1"&gt;Audi&lt;/option&gt;
      &lt;option value="2"&gt;BMW&lt;/option&gt;
      &lt;option value="3"&gt;Citroen&lt;/option&gt;
      &lt;option value="4"&gt;Ford&lt;/option&gt;
      &lt;option value="5"&gt;Honda&lt;/option&gt;
      &lt;option value="6"&gt;Jaguar&lt;/option&gt;
      &lt;option value="7"&gt;Land Rover&lt;/option&gt;
      &lt;option value="8"&gt;Mercedes&lt;/option&gt;
      &lt;option value="9"&gt;Mini&lt;/option&gt;
      &lt;option value="10"&gt;Nissan&lt;/option&gt;
      &lt;option value="11"&gt;Toyota&lt;/option&gt;
      &lt;option value="12"&gt;Volvo&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>