Submit form upon selection of browser autocompletion (not custom autocompletion)

Question

The body of my HTML looks like this:

<body>
<form action='http://www.example.com' method='GET'>
    <input type='text' id="text_input"/>
</form>
</body>

After entering a couple values into the field and returning to the site, a user is given autocompletion suggestion from the browser. When you select one, how can I have the form automatically submit?

In this question, they show something similar in jQuery:

$("#text_input").autocomplete({
    source: ['apple', 'banana'],
    minLength: 2,
    select: function(event, ui) { 
        $("#text_input").val(ui.item.value);
        $("#text_input").closest('form').submit(); }
});

However, this uses custom autocompletion suggestions, and not the browsers saved results.

score 1 · Accepted Answer · answered Mar 27 '16 at 00:45

Browser auto-completion isn't generally detectable using JS, from the scripts perspective, it will just appear that the user entered some data.

I think the best thing to do would be re-consider your approach to the problem, however if you defiantly want to do it this way:

The closest thing I can think of to what you're after would be to listen for key presses and changes, and a change that occurs with no key presses can be considered an auto-completion.

e.g.

$(document).ready(function(){
  var keyPressed = false;
  $("#test").on("keydown", function(){
    keyPressed = true;
  });
  $("#test").on("change", function(){
    if(!keyPressed){
      alert("Submit");
    }
  });
});

Example: https://jsfiddle.net/o60nf4s6/

Issues:

Also triggered by pasting using the right click context menu
change event is only fired after the input field loses focus
Any keypress in the input will stop it from submitting, even if auto complete us used. This will only work if the whole input is filled from the browser options.

Submit form upon selection of browser autocompletion (not custom autocompletion)

1 Answers1