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

【问题标题】：how to create autocomplete forum using html5 local storage?如何使用 html5 本地存储创建自动完成论坛？
【发布时间】：2011-07-18 02:13:57
【问题描述】：

大家好，我是编程新手。你能帮我为html表单中的自动完成文本字段编写代码吗？我想使用本地存储数据。如果任何时候用户将在文本字段中插入一些数据，它将存储在本地存储中。如果下次他输入数据时，与该字段相关的本地存储数据将显示为弹出窗口（如 mozila 或 chrome 自动完成）。

请给我一些指导

【问题讨论】：

到目前为止你尝试过什么？

标签： javascript forms html autocomplete local-storage

【解决方案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>

【讨论】：

【解决方案2】：

好吧，为了得到你想要的结果，我可能会首先从用户输入表单的数据中构建一个 JavaScript 对象。这将更容易将数据输入到本地存储中。假设你的表单看起来像这样 ->

<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。该代码还取决于您是否正在检查多个值。然而，在最简单的情况下，记住单个用户的数据，您真正需要做的就是检查本地存储中是否存在该值。可能是这样的 ->

$('#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 的这个文本框中的，所以它不打算按书面形式运行，我也没有在任何地方测试它。但是，我确实希望这可以使您朝着正确的方向前进。

【讨论】：

【解决方案3】：

你可以这样使用它：

<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

【讨论】：