title: Text field with dynamically generated datalist using jQuery
body: <p>I am trying to generate a dynamic  for a text input. When ever the text input will be clicked, jQuery will find previously inputted data for the current user and append them on the corresponding datalist. Here is the markup i have right now:</p>
  
  <pre><code>&lt;div class="form-inline"&gt;
    &lt;input type="text" list="suggestions" id="search-input"&gt;
    &lt;datalist id="suggestions"&gt;
    &lt;/datalist&gt;
    &lt;button type="submit" class="btn btn-default" id="search-submit"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the jQuery:</p>
  
  <pre><code>$('#search-input').on('click', function(){
     for(var x = 0; x&lt;localStorage.length; x++){
      var key = localStorage.key(x);
      var item = localStorage.getItem(key);
      console.log(username+'-'+key+'-'+item);//username is a global var that holds the name of the currently logged in user
      if(key == username) {
        $('#suggestions').append('&lt;option value="'+item+'"&gt;');
      }
    }
  });
  </code></pre>
  
  <p>This is not doing anything so far. What could be going wrong here?</p>