title: How to assign datalist to input?
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;input type="text" name="city" autocomplete="off"&gt;
  
  &lt;datalist id="seek_list"&gt;
  &lt;option value="Value1"&gt;
  &lt;option value="Value2"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>and this Javascript:</p>
  
  <pre><code>$('input[name=city]').on('keyup', function()
  {
      if (this.value.length &gt; 1)
      {
          this.list = 'seek_list';
      }
      else
      {
          this.list = ''; 
      }
  });
  </code></pre>
  
  <p>I want the autocomplete to work after user types 2 or more chars in the input field, but this doesn't work. The datalist is not assigned.
  I also tried this approach but with no luck:</p>
  
  <pre><code>&lt;input type="text" name="city" autocomplete="off" list="seek_list"&gt;
  
  &lt;datalist&gt;
  &lt;option value="Value1"&gt;
  &lt;option value="Value2"&gt;
  &lt;/datalist&gt;
  
  $('input[name=city]').on('keyup', function()
  {
      if (this.value.length &gt; 1)
      {
          $('datalist')[0].id = "seek_list";
      }
      else
      {
          $('datalist')[0].id = "";
      }
  });
  </code></pre>
  
  <p>The only thing that worked was an empty datalist with this HTML:</p>
  
  <pre><code>&lt;input type="text" name="city" autocomplete="off" list="seek_list"&gt;
  
  &lt;datalist id="seek_list"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>and appending options to the datalist with Javascript, but that was slow.</p>