Автозаполнение форм с помощью jQuery и API веб-хранилища

Первым шагом в этом разделе является извлечение и сохранение в переменной основных элементов нашей страницы, формы и списка поисков, потому что мы будем использовать их много раз:

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

Затем нам нужно проверить, сохранен ли пользователь уже в поиске. Если это так, мы сохраним их в переменную, иначе мы инициализируем переменную в пустой массив:

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

Очень образно я назвал ключ, в котором код будет хранить поиски, как «поиски». Во втором утверждении мне нужно было использовать метод JSON.parse()

На этом этапе мы должны указать, что должна делать наша страница, когда пользователь выполняет новый поиск. Поэтому мы добавим обработчик событий для события submit

В коде живого демо, которое я показал в начале, первое выражение обработчика останавливает форму для фактической отправки данных. Это сделано потому, что у демо нет бэкенда, но в реальном проекте вам это не нужно.

Когда пользователь заполняет форму и отправляет ее, нам нужно сохранить значения, вставленные в локальное хранилище, до отправки запроса. Для этого мы сначала сериализуем форму с помощью метода 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() Внутри него мы очищаем любой ранее созданный список и затем перебираем старые поиски. Как я уже упоминал, каждый элемент показанного списка будет отображать в виде мнемонического имени значение основного поля, а подсписок, содержащий все поля формы, отображается только тогда, когда пользователь наводит указатель мыши на мнемоническое имя или фокусируется на нем. Каждый раз, когда пользователь нажимает или нажимает клавишу ВВОД или ПРОБЕЛ в элементе списка, форма автоматически заполняется с использованием выбранного набора значений.

На основании этого описания каркас функции выглядит следующим образом:

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

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

Внутри for Затем мы перебираем свойства этого объекта, чтобы создать подсписок, содержащий имя и значения полей. Подсписок создается с использованием элемента dldtdd

Код, который реализует эти шаги, представлен ниже:

 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, чтобы избежать проблем с закрытием. Наконец, каждый элемент списка ( litabindex="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, в дополнение к API веб-хранилища мы создали страницу, которая может хранить заданный набор запросов и восстанавливать их при необходимости. Надеюсь, вам понравилась статья, и вы нашли ее полезной.