title: HTML <select>: focus option based on user input?
body: <p>I have an HTML select element:</p>
  
  <pre><code>&lt;select id='poetslist'&gt;
      &lt;option value="shakespeare"&gt;William Shakespeare&lt;/option&gt;
      &lt;option value="milton"&gt;John Milton&lt;/option&gt;
      &lt;option value="keats"&gt;John Keats&lt;/option&gt;
      &lt;option value="wordsworth"&gt;William Wordsworth&lt;/option&gt;
      &lt;option value="larkin"&gt;Phillip Larkin&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In Chrome, when the page loads, the <code>William Shakespeare</code> option is selected. If the user starts typing 'Phil', the list focusses itself on <code>Phillip Larkin</code>. Familiar behaviour. </p>
  
  <p>What I'd like to do (preferably using jQuery) is <strong>also</strong> allow the user to type the <em>initials</em> of the poet and have the relevant option come into focus. </p>
  
  <p>So if you typed <code>JK</code>, then the <code>John Keats</code> option should come into focus. <code>JM</code> and John Milton, etc.</p>
  
  <p>I don't even know how the HTML select element works, whether it's different in different browsers, etc - and it seems to be hard to find good documentation for this. </p>
  
  <p>Can anyone figure out a smart way to do this in jQuery?</p>