Как автосохранять поиск по HTML5 через javascript/без обновления

Вопрос:
Есть ли способ запустить функцию автозапуска Webkit из javascript? Если не через выделенный API, существует ли хотя бы один способ реализовать ту же функциональность, манипулируя куки файлами?

Фон:
Мне очень нравится новый тип ввода "поиска" в HTML5 и хочу, чтобы мои пользователи, работающие с Webkit, могли легко вспомнить свои прошлые поиски без накладных расходов на сохранение всех этих поисков в моей базе данных (используя функцию автосохранения).

Проблема, с которой я сталкиваюсь, заключается в том, что поисковые запросы, по-видимому, сохраняются только в том случае, если вход поиска инкапсулирован в форму и эта форма выполняет стандартную POST на отправке. Поскольку мой вход для поиска используется для фильтрации результатов, которые уже присутствуют, не имеет большого логического смысла полностью перезагрузить страницу, поэтому я использую AJAX для повторного заполнения результатов. Интерфейс является чистым и последовательным, если я возвращаю false в моей функции AJAX, но это, очевидно, не вызывает форму POST [по дизайну], поэтому браузер (по крайней мере, Chrome) не сохраняет поисковый запрос. Возврат true обновляет всю страницу, уничтожая содержимое, вложенное в AJAX, и всю точку фильтра, но поисковый запрос сохраняется.

$('#filter-form').submit(function(e) {
      var term = $('#filter').val();
      $.ajax({
        async: true,
        type: 'POST',
        url: '/Home/GetResults',
        data: {
          filter: term
        },
        success: function(returnData) {
          $('#result-list').html(returnData);
        }
      });
      return false;
    }
<form id="filter-form" name="filter-form" action="#">
  <input type="search" name="filter" id="filter" results="5" autosave="EluminitePreviousFilters" />
</form>
<div id="result-list"></div>

Ответ 1

Существует трюк, который использует скрытый iframe, связанный с формой:

<iframe id="hidden-frame" name="hidden-frame" style="display:none" src="about:blank"></iframe>

<form target="hidden-frame" method="post" action="about:blank">
  <input type="search" name="filter" id="filter" results="5" />
  <button type="submit">Submit</button>
</form>

Если ваш обработчик формы возвращает true, форма будет отправлена ​​(но пользователи не заметят), и браузер сохранит введенное значение в списке автозаполнения.

Я создал пример в JSBin: http://jsbin.com/farelufaku/edit?html,output

Ответ 2

demo: http://so.devilmaycode.it/how-to-autosave-html5-search-input-through-javascript-without-refresh/

Привет, элюминит, я знаю, это может быть не в порядке (?), но так как вы говорите:

по крайней мере, способ реализовать ту же функциональность, манипулируя печенье?

и если я не ошибаюсь, ваша основная цель - не хранить данные в базе данных; вы действительно можете использовать

API веб-хранилища, который обеспечивает механизмы, с помощью которых браузеры могут хранить пары ключ/значение, гораздо более интуитивно, чем использование файлов cookie.

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

см. мою демонстрацию для реализации кода с использованием автозаполнения jQuery UI.

ПРИМЕЧАНИЕ. есть, конечно, плагины, которые могут обрабатывать как Локальное хранилище, так и файлы cookie в то же время, как эти jQuery-Storage-API, jQuery Хранение и многие другие. просто выполните поиск в google.

надеюсь, что эта помощь.