jquery表格自动刷新_使用jQuery和Web Storage API自动填写表格

jquery表格自动刷新

几年前，在我开发的一个项目中，有一个搜索表，该表由一个主字段构成，然后由许多其他字段构成以优化搜索。 在该项目中，用户通常只需要更改一个或两个字段即可多次执行相同的搜索。 一次又一次地填写表格很痛苦，因此我们决定帮助用户快速实现他们的目标。

在本文中，我将向您展示如何使用jQuery ， jQuery.deserialize和Web Storage API重新创建相同的改进。

要求

为了改进我在引言中提到的形式，我们决定显示以前执行的搜索列表，最多20个。搜索使用Web Storage API存储在浏览器中。 如果您有登录系统，则可能需要修改演示，以便将搜索结果存储在数据库中。 就我而言，这是没有选择的，因为没有登录系统。

列表的每个项目均由表示用户在主字段中写入的值的文本和表示字段名称以及已写入或选定的值（如果使用复选框和单选按钮）的子列表组成。 当用户单击这些搜索之一时，表单的字段会自动填充该搜索的值。 这样，如果用户需要执行相同的研究，则除了单击“提交”按钮外，他/她无需执行任何操作。 否则，用户可以更改所需的字段，然后执行搜索。 这项小小的改进为该项目的用户节省了很多时间，并受到赞赏。

本文的最终结果显示在下面，也可以作为JSFiddle使用 ：

标记

第一步是创建要增强的形式。 如果要在正在处理的项目中使用这种方法，则将拥有自己的特定字段，但是为了此处的示例，我将为每个字段创建一个包含不同类型的虚拟对象。 例如，我将使用search ， text ， email ， checkbox ， radio和date类型。 这样，您可以看到此方法如何与不同类型一起使用。

关于表单，没有更多要说的了，因此这里是我们将使用的代码：

<form name="form" id="form">
   <label for="search">This is the main search field:</label>
   <input type="search" name="search" id="search" />
   <label for="text">This a text field:</label>
   <input type="text" name="text" id="text" />
   <label for="email">This an email field:</label>
   <input type="email" name="email" id="email" />
   <label>This a set of checkbox:</label>
   <label>
      Checkbox1:
      <input type="checkbox" name="checkbox[]" value="checkbox1" />
   </label>
   <label>
      Checkbox2:
      <input type="checkbox" name="checkbox[]" value="checkbox2" />
   </label>
   <label>This a set of radio buttons:</label>
   <label>
      Radio1:
      <input type="radio" name="radio" value="radio1" checked />
   </label>
   <label>
      Radio2:
      <input type="radio" name="radio" value="radio2" />
   </label>
   <label>
      Radio3:
      <input type="radio" name="radio" value="radio3" />
   </label>
   <label for="date">This a date field:</label>
   <input type="date" name="date" id="date" />

   <input type="reset" value="Reset" />
   <input type="submit" value="Submit" />
</form>

放置好表单后，我们还需要一个元素来显示以前的搜索。 为此，我将以下有序列表添加到页面中：

<ol id="searches-list">
</ol>

而已！ 我们的演示不需要其他元素，至少不需要静态元素，我们将在后面的部分中看到。

风格

默认情况下，旧搜索的列表将仅显示主字段的值，而字段名称/值的子列表将隐藏。 这很有用，特别是在您的表单包含很多字段的情况下，因为整个列表很容易变长，实际上用户需要滚动很长的时间。 与往常一样，我们还希望考虑由于可访问性问题，仅当用户将元素悬停时才显示某些内容是一种不好的方法。 因此，当主值获得焦点时，我们将显示子列表。 这是通过以下CSS完成的：

#searches-list > li:hover dl,
#searches-list > li:focus dl
{
   display: block;
}

#searches-list dl
{
   margin: 0;
   display: none;
}

最后，我们希望给出一个视觉提示，表明列表可以完成某些操作，因此我们还将光标更改为指针：

#searches-list
{
   cursor: pointer;
}

既然我们已经完成了样式，那么现在该讨论促进改进的业务逻辑了。

业务逻辑

这个小演示将使用jQuery和jQuery.deserialize ，因此您需要做的第一件事是获取它们的副本并将其包含在页面中。 您还需要一些Web存储API的知识，因此，我建议您阅读文章Web存储API概述 。

本部分的第一步是检索页面的主要元素，表单和搜索列表并将其存储到变量中，因为我们将多次使用它们：

var $searchesList = $('#searches-list');
var $form = $('#form');

然后，我们需要验证用户是否已经存储了一些搜索。 如果是这种情况，我们将它们保存到变量中，否则我们将变量初始化为一个空数组：

var searches = window.localStorage.getItem('searches');
searches = (searches === null) ? [] : JSON.parse(searches);

我非常有想象力地将代码存储在其中的键命名为“搜索”。 在第二个语句中，我需要使用JSON.parse()方法，因为Web Storage API不允许存储复杂数据。

此时，我们必须指示用户执行新搜索时页面应执行的操作。 因此，我们将为表单的submit事件添加一个事件处理程序。

在我最初显示的实时演示的代码中，处理程序的第一条语句停止了表单以实际提交数据。 这样做是因为该演示没有后端，但是在实际项目中您不需要它。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

当用户填写并提交表单时，我们需要在发送请求之前将插入的值存储到本地存储中。 为此，我们首先使用jQuery的serialize()方法对表单进行serialize() ，然后将最后执行的搜索放在列表顶部。 在此演示中，我们将避免多次存储相同的搜索，因此代码将搜索重复项并将其删除。 最后，该演示最多可为每个用户存储10次搜索，但是您可以将此值更改为所需的值。 对搜索执行所有这些操作后，我们需要将它们存储回本地存储中。

这可以通过以下代码实现：

$form.submit(function(event) {
   // Serializes the form
   var currentSearch = $(this).serialize();
   searches.unshift(currentSearch);
   // Removes the duplicates
   for(var i = 1; i < searches.length; i++) {
      if (searches[0] === searches[i]) {
         searches.splice(i, 1);
      }
   }

   // Stores only the last 10 searches
   if (i === searches.length && searches.length > 10) {
      searches.pop();
   }

   // Stores the new list into the local storage
   window.localStorage.setItem('searches', JSON.stringify(searches));
});

在演示中，作为最后一条语句，我将调用一个名为buildSearchesList()的函数，我们将在稍后对此进行讨论。 这是必需的，因为该演示没有后端，因此每次提交表单时都需要重新创建HTML列表。

到目前为止，该页面能够存储所执行的搜索，但是我们需要向用户显示该列表，以便如果他/她单击其中一项，则将自动填写表格。 对于最后一部分，我们将创建一个名为buildSearchesList()的函数。 在其中，我们清空所有以前构建的列表，然后循环遍历旧的搜索。 正如我提到的，显示的列表的每个项目将以助记符名称显示主字段的值，而子列表包含仅当用户将鼠标悬停或着重于助记符名称时显示的表单所有字段。 每次用户在列表项上单击或按ENTER或SPACE时，将使用选定的一组值自动填写表单。

基于此描述，功能的框架如下：

function buildSearchesList(searches, $searchesList, $form) {
   $searchesList.empty();

   for (var i = 0; i < searches.length; i++) {
      // Other code goes here...
   }
}

在for内部，我们必须将从本地存储中检索到的列表中的每个项目转换为JSON可解析的字符串，然后将其转换为等效的对象。 然后，我们遍历此对象的属性以创建包含字段名称和值的子列表。 子列表是使用dl元素及其相关的dt和dd 。

下面报告了实现这些步骤的代码：

var params = JSON.parse('{"' +
   decodeURIComponent(
      searches[i]
         .replace(/&/g, '","')
         .replace(/=/g, '":"')
         .replace(/\+/g, ' ')
   ) +
   '"}'
);

var text = '<dl>';
for (var key in params) {
   text += '<dt>' + key + ':</dt><dd> ' + params[key] + '</dd>';
}
text += '</dl>';

现在，我们已经创建了先前搜索列表的项目，我们需要将其添加到列表中，并指示用户单击还是按下自动填充表单之前提到的两个键之一。 表单由jQuery.deserialize插件及其deserialize deserialize()方法调用自动填充。 但是，由于我们处于循环状态并处理事件处理程序，因此必须将代码包装到IIFE中，以避免发生任何关闭问题。 最后，每个列表项（ li ）必须具有tabindex="0"属性，否则无法使用TAB键将其聚焦。 下面列出了实现最后一部分的代码：

(function(searchData) {
   $searchesList.append(
      $('<li tabindex="0">')
         .text(params['search'])
         .on('click keypress', function(event) {
            if (
               event.type !== 'keypress' ||
               event.keyCode === 13 ||
               event.keyCode === 32
            ) {
               $form
                  .trigger('reset')
                  .deserialize(searchData);
            }
         })
         .append(text)
   );
})(searches[i]);

在最后一个代码片段中，我们结束了演示。 再次，本文的最终结果如下所示，并且可以作为JSFiddle获得 ：

结论

在本文中，我讨论了一种简单的技术，可以增强您的用户的体验，以防您的项目具有在典型会话中多次填写的表单。 通过使用jQuery和jQuery.deserialize，除了Web Storage API，我们还创建了一个页面，该页面能够存储给定的搜索集，并在必要时将其还原。 希望您喜欢这篇文章，并且觉得对您有用。

翻译自: https://www.sitepoint.com/auto-filling-forms-jquery-web-storage-api/

jquery表格自动刷新