ajax - How to autosave HTML5 search input through javascriptwithout refresh - Stack Overflow

admin管理员组

文章数量:1290347

Question:
Is there any way to trigger Webkit's autosave functionality from javascript? If not through a dedicated API, is there at least a way to acplish the same functionality by manipulating cookies?

Background:
I really like the new "search" input type in HTML5 and want to give my Webkit-enabled users the benefit of easily recalling their past searches without the overhead of storing all those searches in my database (using the autosave functionality).

The problem I'm hitting is that the search terms seem to only get saved if the search input is encapsulated in a form and that form executes a standard POST on submit. Since my search input is being used to filter results that are already present it doesn't make much logical sense to pletely reload the page, so I'm using AJAX to repopulate the results. The interface is all clean and consistent if I return false in my AJAX function, but this obviously doesn't trigger the form POST [by design] so the browser (at least Chrome) doesn't save the search term. Returning true refreshes the entire page, destroying my AJAX-injected content and the entire point of the filter, but the search term is saved.

$('#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>

Question:
Is there any way to trigger Webkit's autosave functionality from javascript? If not through a dedicated API, is there at least a way to acplish the same functionality by manipulating cookies?

Background:
I really like the new "search" input type in HTML5 and want to give my Webkit-enabled users the benefit of easily recalling their past searches without the overhead of storing all those searches in my database (using the autosave functionality).

The problem I'm hitting is that the search terms seem to only get saved if the search input is encapsulated in a form and that form executes a standard POST on submit. Since my search input is being used to filter results that are already present it doesn't make much logical sense to pletely reload the page, so I'm using AJAX to repopulate the results. The interface is all clean and consistent if I return false in my AJAX function, but this obviously doesn't trigger the form POST [by design] so the browser (at least Chrome) doesn't save the search term. Returning true refreshes the entire page, destroying my AJAX-injected content and the entire point of the filter, but the search term is saved.

$('#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>

• javascript
• ajax
• html

Share Improve this question Follow edited Oct 20, 2015 at 15:59 Ruslan López 4,47722 gold badges3030 silver badges4040 bronze badges asked Jan 29, 2013 at 1:39 EluminiteEluminite 15155 bronze badges 6

• Did you ever find a solution to this? – Jim Bolla Commented Oct 13, 2015 at 17:17
• Would saving your own list in localStorage be an option? You can keep a list and push to it on submit and save the JSON.stringify(list) to localStorage. – Bill Criswell Commented Oct 13, 2015 at 17:32
• 2 @JimBolla OP has more than two years and Eluminite is not connected since February this year ... You have exactly the same problem? I would remend you to open your own question specifying your setting, problem and what you've tried to get it. – gmo Commented Oct 13, 2015 at 17:56
• @JimBolla Tried jQuery UI autoplete remote with cache jqueryui./autoplete/#remote-with-cache ? – guest271314 Commented Oct 19, 2015 at 0:08
• 1 @BillCriswell Made a good point with using localStorage (or sessionStorage, depending on your purposes) – sailens Commented Oct 20, 2015 at 14:35

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 8 +50

There is a trick that uses a hidden iframe connected to the form:

<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>

If your form submit handler returns true, form will be submitted (but users won't notice), and the browser will save the entered value in the autoplete list.

I've created an example on JSBin: http://jsbin./farelufaku/edit?html,output

demo: https://so.lucafilosofi./how-to-autosave-html5-search-input-through-javascript-without-refresh/

Hi Eluminite, i know this maybe out of question(?) but since you say:

at least a way to acplish the same functionality by manipulating cookies?

and if i'm not wrong your main goal is to not store data in database; you can actually use

The Web Storage API that provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

as you see it is supported by a various number of modern browsers and where it doesen't support it you can still use cookies...

see my demo for a code implementation using jQuery UI autoplete.

NOTE: there are of course plugins out there that can handle both Local Storage and cookies at the same time like these jQuery-Storage-API, jQuery Storage and many other. just search google.

hope this help.

本文标签： ajaxHow to autosave HTML5 search input through javascriptwithout refreshStack Overflow