Better onChange with Dijit’s intermediateChanges

One of the things I love about Dojo's UI framework, Dijit, is that its widgets provide loads of functionality within one property that would take a bit of Javascript jousting to create on its own.  One of those widget properties is intermediateChanges.  intermediateChanges is a boolean property of dijit.form.* widgets (TextBox, ComboBox, etc.) that fires the onChange event whenever the value of the TextBox or other form widget changes.  Not the typical onChange event which only fires when the field is blurred -- the event fires on each keystroke which changes value within the widget.

The Dojo JavaScript

The intermediateChanges property is set to false by default so you will need to enable it if you want to use it:

// Create a TextBox that fires onChange whenever the input's value truly changes
var textbox = new dijit.form.TextBox({
	// Set intermediateChanges on
	intermediateChanges: true
});

Connection to the onChange event would look like:

// When the value changes...
dojo.connect(textbox,"onChange",function(value) {
	// Now do something with the value...
	console.log("Value is: ",value);
});

// Value is: D
// Value is: Da
// Value is: Dav
// Value is: Davu
// Value is: Dav
// Value is: Davi
// Value is: David
// Value is: David_
// Value is: David_W

The console.log statement will run with each valuable keystroke or if content is dragged into the box.  intermediateChanges is especially helpful when creating or modifying a widget that should act as an autocompleter.  Keep in mind that simple onKeyUp changes can be misleading, as the value may not change (imagine simply pressing the shift key) -- that's why intermediateChanges is helpful.  Even better is that you don't have to make that keyup connection an logic yourself -- it's baked right into Dijit!

While intermediateChanges property may seem like a very small feature (and in the grand scheme of Dijit, it is), it's very helpful when you need it!  Having this functionality baked into Dojo allows you to continue developing without the hassle of creating your own onChange logic.