title: How to make datalist match result from beginning only
body: <p>I am tring to make datalist in html here is example</p>
  
  <pre><code>&lt;h1&gt;Datalist Demo&lt;/h1&gt;
  &lt;label for="default"&gt;Pick a programming language&lt;/label&gt;
  &lt;input type="text" id="default" list="languages"&gt;
  &lt;datalist id="languages"&gt;
      &lt;option value="HTML"&gt;
      &lt;option value="CSS"&gt;
      &lt;option value="JavaScript"&gt;
      &lt;option value="Java"&gt;
      &lt;option value="Ruby And Go"&gt;
      &lt;option value="PHP And HTML"&gt;
      &lt;option value="Go"&gt;
      &lt;option value="Erlang"&gt;
      &lt;option value="Python And C++"&gt;
      &lt;option value="C"&gt;
      &lt;option value="C#"&gt;
      &lt;option value="C++"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>but when i search for 'go' it show me 2 results</p>
  
  <ul>
  <li><code>Ruby And Go</code></li>
  <li><code>Go</code></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/jjEXM.png" rel="noreferrer">Result When i Search for 'go'</a></p>
  
  <p>I want that it should only show term which match the beginning of entered text and NOT from inside.<br>
  Like When I search for 'go' only one result should be displayed</p>
  
  <ul>
  <li><code>Go</code></li>
  </ul>
  
  <p>I have to implement this on more than 5000 records stored in MySQL.</p>