title: Scroll to items on keyboard input of very long dropdown menu
body: <p>I have a really long list of countries which I made into a dropdown menu that has the scroll, so you can scroll through them. It looks something likes this:</p>
  
  <p><a href="https://codepen.io/Karadjordje/pen/MEBjRY" rel="nofollow noreferrer">https://codepen.io/Karadjordje/pen/MEBjRY</a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"&gt;Dropdown Example
    &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;ul class="dropdown-menu scroll-menu" role="menu"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          A
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          B
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          C
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          D
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          E
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          F
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  I need to make some sort of search with this dropdown. I have no input field for search by design I was given, so I need to make it differently.<br></p>
  
  <p>The desired functionality is that I should be able to use the keyboard to scroll to countries, let's say I press key "M" on my keyboard it scroll to countries which start with the letter "M", if I press "A" it should scroll back to countries starting with letter "A". Is there a way to achieve this and how should I approach this problem?</p>
  
  <p>EDIT: Updated codepen with newest idea for solution</p>