title: Javascript/Jquery to go to URL from <input> and <datalist>
body: <p>My problem:
  I am looking to make an input box that autocompletes suggestions as I type them in.  Upon typing them taking the first selection (this is already figured out in the plug-in) by either clicking or pressing enter, I'd like to submit that selection which is tied to a URL to redirect to that new URL. </p>
  
  <h1>Basic Example of Plug-in</h1>
  
  <p>This here is directly from the developer's website and an example of what is used.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="form-control awesomplete" list="mylist" /&gt;
  &lt;datalist id="mylist"&gt;
   &lt;option&gt;Ada&lt;/option&gt;
   &lt;option&gt;Java&lt;/option&gt;
   &lt;option&gt;JavaScript&lt;/option&gt;
   &lt;option&gt;Brainfuck&lt;/option&gt;
   &lt;option&gt;LOLCODE&lt;/option&gt;
   &lt;option&gt;Node.js&lt;/option&gt;
   &lt;option&gt;Ruby on Rails&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>The Basic Changes</h1>
  
  <p>What I would use it for is to navigate a list of U.S. states.  The idea here would be to redirect a new (or current window) to the URL associated with the state.  Alabama going to <a href="http://www.alabama.gov" rel="nofollow noreferrer">http://www.alabama.gov</a>, and so on.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="form-control awesomplete" list="states" /&gt;
  &lt;datalist id="states"&gt;
   &lt;option&gt;Alabama&lt;/option&gt;
   &lt;option&gt;Alaska&lt;/option&gt;
   &lt;option&gt;Arizona&lt;/option&gt;
   &lt;option&gt;Arkansas&lt;/option&gt;
   &lt;option&gt;California&lt;/option&gt;
   &lt;option&gt;Colorado&lt;/option&gt;
   &lt;option&gt;Connecticut&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>I stuck here:
  </code></pre>
  
  <p>After going through many searches and seeing that Jquery or Javascript is required for this, I've tried to go through some solutions, but cannot quite seem to make it work.  It might not even be possible.  I didn't want to throw in too many examples of what I tried and clutter the post up, so I tried to leave it in its most basic form with the idea in mind.  </p>
  
  <p>As far as I know, I'd need to tie a URL to a value with the option tag, correct?   I have examples of this in my code, but once again, I tried to leave this in its most basic form for the viewer.  </p>