Question

大家好，我是编程新手。你能帮我写一个html格式的自动填充文本字段的代码吗？我想使用本地存储数据。如果用户将文本字段中的某些数据间隔，则它将存储在本地存储中。如果下次输入数据时，与该字段相关的localstorage数据将显示为弹出窗口（如mozila或chrome autocomplete）。

请提供一些指导

Answer 1

您可以使用html5的<datalist>标记将其用作自动填充。这是一个例子：

<form action="action.php" method="get">

  <input list="bdcity_list" name="bdcity" />
  <datalist id="bdcity_list">
     <option value="Dhaka">
     <option value="Khulna">
     <option value="Sylhet">
     <option value="Rajshahi">
     <option value="Bandarbon">
  </datalist>
 <input type="submit" />

</form>

Answer 2

你可以像这样使用它：

<input list="Employees" type="text" />
<datalist id="Employees">
<option value="Adarsh"></option>
<option value="Madhukar"></option>
<option value="Amar"></option>
<option value="Avinash"></option>
<option value="Kundan"></option>
<option value="Amit"></option>
<option value="Viresh"></option>
<option value="Vivek"></option>
</datalist>

有关详细信息，请转到 http://madhukar.info/Pages/Articles.aspx?ArtId=49

Answer 3

好吧，为了得到你想要的结果，我可能首先用用户输入表单的数据构建一个JavaScript对象。这样可以更轻松地将数据输入本地存储。假设您的表单如下所示 - ＆gt;

<html>
  <form action='someaction.php'>
    name: <input id='name' type='text' />
    age : <input id='age' type='text' />
    <input type='submit' id='submit' value='submit' />
  </form>

  <ul id='autocomplete'>

  </ul>

</html>

使用HTML5本地存储here有很好的指南，应该可以帮助您了解它希望您用来存储数据的键值对系统。假设您使用的是jQuery，您可以像这样准备和发送数据

$('#submit').click(function(){
  // first get the proper values
  var name = $('#name').val();
  var age = $('#age').val();

  // next create the object
  var obj = {name:name,age:age}

  // next send the object off to localstorage
  // using the localStorage object, we can
  // very simply pass in data
  localStorage.setItem('user',obj);
});

就问题的自动完成部分而言，有几种不同的方法可以实现这一目标。正如有人提到的，你可以去jQuery自动完成，但是我对它的API不太熟悉，所以我可能会选择一些简单的jane JavaScript。代码还取决于您是否检查多个值。但是在最简单的情况下，记住单个用户的数据，您真正需要做的就是检查本地存储中是否存在值。可能是这样的事情 - ＆gt;

$('#name').change(function(){
  // check the local storage to see if
  // there are similar values to what's
  // being entered
  var currentText = $('#name').val();

  if( localStorage.user.indexOf(currentText) == 0){
    $('#name').val(localStorage.user);
  }
});

这一切都直接写在StackOverflow的这个文本框中，因此不打算按照书面形式运行，我不在任何地方测试它。但是，我希望这可以让你朝着正确的方向前进。

如何使用html5本地存储创建自动完成论坛？

3 个答案: