Any event triggered on autocomplete?
I recommending using monitorEvents
. It's a function provide by the javascript console in both web inspector and firebug that prints out all events that are generated by an element. Here's an example of how you'd use it:
monitorEvents($("input")[0]);
In your case, both Firefox and Opera generate an input
event when the user selects an item from the autocomplete drop down. In IE7-8 a change
event is produced after the user changes focus. The latest Chrome does generate a similar event.
A detailed browser compatibility chart can be found here:
https://developer.mozilla.org/en-US/docs/Web/Events/input
Browser Autofill and Javascript triggered events
One solution I have been using occasionally is to check whether the value of the field/input/select differs from it's defaultValue. defaultValue would be the value that was originally in the markup, and value is the current value aka selected or entered value. This would probably differ even though the form was autopopulated.
If you want to turn off autofill altogether, it might be wise to add autocomplete="off" on fields that are directly connected to your logic.
Detecting Browser Autofill
The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field.
Change event trigger for different browsers:
For username/password fields:
- Firefox 4, IE 7, and IE 8 don't dispatch the change event.
- Safari 5 and Chrome 9 do dispatch the change event.
For other form fields:
- IE 7 and IE 8 don't dispatch the change event.
- Firefox 4 does dispatch the change change event when users select a value from a list of suggestions and tab out of the field.
- Chrome 9 does not dispatch the change event.
- Safari 5 does dispatch the change event.
You best options are to either disable autocomplete for a form using autocomplete="off"
in your form or poll at regular interval to see if its filled.
For your question on whether it is filled on or before document.ready again it varies from browser to browser and even version to version. For username/password fields only when you select a username password field is filled. So altogether you would have a very messy code if you try to attach to any event.
You can have a good read on this HERE
jQuery Autocomplete Select Trigger Event
You need to trigger the same keyup event in jquery autocomplete select callback function .. check this example FIDDLE:https://jsfiddle.net/kameeshwaran/m96nseh4/3/
$(document).ready(function(){
$('input[name=Category]').keyup(function () {
if ($(this).val() == "Green")
$('#Sub_Level2').show();
else
$('#Sub_Level2').hide();
});
$( "#tags" ).autocomplete({
select: function( event, ui ) {
$("input[name=Category]").val(ui.item.value);
$('input[name=Category]').keyup();
}
});
});
Related Topics
How to Break Line in JavaScript
Good Reasons Why Not to Use Iframes in Page Content
"Scroll" to the Very Right of a Long Text Input
How to Combine Jquery Animate with CSS3 Properties Without Using CSS Transitions
Set the Webkit-Keyframes From/To Parameter with JavaScript
D3.Js Drawing Geojson Incorrectly
What Limitations Apply to Opaque Responses
What Is the Fastest or Most Elegant Way to Compute a Set Difference Using JavaScript Arrays
Cannot Access CSSrules from Local CSS File in Chrome 64
What Is a Text Node, Its Uses? //Document.Createtextnode()
JavaScript Detect Click Event Outside of Div
The Purpose of Starting an Initial Comment with /*! in JavaScript and CSS Files
How to Increase the Font Size Based on the Window Width
Retrieving Percentage CSS Values (In Firefox)