event on selecting from autocomplete

Question

I have a textbox with keydown, click and change event handlers bound to it. When the user enters text in this textbox a preview gets updated simultaneously. This works great!

However, when the user enters some text and then chooses from autocomplete, only the text the user entered i visible in the preview.

It only updates if the user leaves the textbox or clicks in it or enter more characters.

Is there any event that gets fired the instant the user selects from the autocomplete?

Note: I'm not using the jquery autocomplete plugin or anything, just the web browser's autocoplete.

Can you post some code? Does the problem occur in all browsers? — Colin Brock, Oct 31 '11 at 15:04
Using internet explorer? Maybe this will interest you: http://stackoverflow.com/questions/343192/why-does-the-javascript-onchange-event-not-fire-if-autocomplete-is-on — Frug, Oct 31 '11 at 15:36

score 3 · Answer 1 · answered Nov 04 '13 at 20:58

I just ran into the same problem. The browser (in this case Chrome) does not trigger any event at all when clicking a proposed autocomplete value. So I'm using setInterval to poll my input field(s) every 100ms or so to see if their value has changed, and if so, call the appropriate function.

Here's my code (uses jQuery):

  var $form = $(".user");
  var $email = $("input[name='email']",$form);

  // start polling when the field is focused
  $email.focus(function()
    {
      var $inp = $(this);
      $inp.data("val_old",$inp.val());
      $inp.data("val_poll",setInterval(function()
        {
          if ($inp.data("val_old") != $inp.val())
          {
            checkEmail(); // value has changed, take some action
            $inp.data("val_old",$inp.val());
          }
        },100));
    });

  // stop polling on blur
  $email.blur(function()
    {
      clearInterval($(this).data("val_poll"));
      $(this).removeData("val_old val_poll");
    });

I used to have an onkeypress event, but with this poller it is no longer needed.

Not very pretty, but effective. Works in any browser.

score 0 · Answer 2 · answered Oct 31 '11 at 15:27

<script type="text/javascript">
    function fillReview() {
        var email = document.getElementById("email");
        var review = document.getElementById("email-review");
        review.innerHTML = email.value;
    }
</script>


<input type="text" id="email"  onkeyup="fillReview();" />
<span id="email-review"></span>

event on selecting from autocomplete

2 Answers2