Run jQuery function when a browser's automatically suggested option is clicked
<p>My current code changes the color of the input field's border to green if it is a valid email, and to red if it is an invalid email.<br>
html:</p>

<pre><code>&lt;input class="ui_input2 no_space" id="input_email" type="email" name="email" style="height:25px; width:300px; font-size:16px;" required /&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready(function() {
    $('#input_email').keyup(function() {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var val_i_email = $("#input_email").val();

        var empty = false;
        $('#input_email').each(function() {
            if (val_i_email &lt; 5 || !emailReg.test(val_i_email)) {
                empty = true;
            }
        });

        if (empty) {
            $(this).addClass("invalid");
            $(this).removeClass("valid");
        } else {
            $(this).addClass("valid");
            $(this).removeClass("invalid");
        }
    });
});
</code></pre>

<p>Everything works perfectly when typed but if you clicked on an option (example: previously used email), the border's color does not seem to change unless you edited the text a bit.
<br><br>
Screen shots:<br>
<img src="http://i.stack.imgur.com/Dyz6a.png" alt="enter image description here"></p>

<p>I clicked the highlighted option above. Here is the result:-
<br><img src="http://i.stack.imgur.com/M85UN.png" alt="enter image description here"></p>

<p>Is there a way to run another function or the same function again when the automatically  suggested option is clicked?
<br><br>
<a href="http://jsfiddle.net/Tomer123/7bmrb/" rel="nofollow">jsfiddle</a></p>
