javascript - 使用 jQuery 动态生成数据列表的文本字段

Question

我正在尝试为文本输入生成动态。当单击文本输入时，jQuery 将查找当前用户之前输入的数据并将它们附加到相应的数据列表中。这是我现在拥有的标记:

<div class="form-inline">
  <input type="text" list="suggestions" id="search-input">
  <datalist id="suggestions">
  </datalist>
  <button type="submit" class="btn btn-default" id="search-submit"><span class="glyphicon glyphicon-search"></span></button>
</div>

这是 jQuery:

$('#search-input').on('click', function(){
   for(var x = 0; x<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('<option value="'+item+'">');
    }
  }
});

到目前为止，这还没有做任何事情。这里可能出了什么问题？

Answer 1

如果您已经知道 key ，则无需搜索本地存储中的所有内容:

$('#search-input').on('click', function(){
   if(localStorage.getItem(username)) {
     $('#suggestions').append('<option value="'+localStorage.getItem(username)+'">');
   }
  }
});

如果这不起作用，但 console.log localStorage.getItem(username) 起作用，请确保 $('#suggestions') 选择器也正常工作。