submit form with delay while entering data into input field

Question

I have a simple form that I need to submit automatically when text is entered.

I can use the onChange or onKeyUp without the best result.

HTML is:

  <form action="" id="fusionSearchForm" method="post">
    <input type="text" class="std_input" id="fusion_searchText" />
  </form>

And jQuery

jQuery("#fusionSearchForm").keyup(function() {
  this.submit();
});

This submits every time a character is entered. I much rather would have it so - there was a delay before submit so you can finish your typing - that focus stays on the input field ready to type after submit (if reload)

Any way to delay a form.submit() so the user can finish typing before form is submitted?

(UPDATE to code to a more "jQuery" kind of way to submit)

Br. Anders

Answer 1

This is a bad idea. You don't want to circumvent the controls people expect on form inputs. If you don't want a submit button then at least wait to submit until you capture an "enter".

Other than a user mind reading device how could you ever know when a user is done typing, unless you were looking for them to type "return" or "enter"? Users won't know they're supposed to pause a moment to let the form submit at the timeout, or that they need to hurry up to get their search entered before the timeout of 500MS.

See: this question

Of if you want to start returning results immediately upon any submission you could do some kind of ajax autocomplete.

Here's a jQuery example of submitting on an enter:

  $("input").keypress(function(e) {
            switch (e.keyCode) {
                    case 13:
                            $("#formid").submit();
                            return false;
                    default:
                            return true;
            }
    });

Answer 2

This should work. Submits the form when nothing was typed for 500ms

var timerid;
jQuery("#fusionSearchForm").keyup(function() {
  var form = this;
  clearTimeout(timerid);
  timerid = setTimeout(function() { form.submit(); }, 500);
});