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

如果您已经知道密钥，则无需搜索localstorage中的所有内容：

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

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

Answer 2

在提及教科书时不应使用click

改为使用change，focus，keyup，keydown

使用jQuery动态生成datalist的文本字段

2 个答案: