Adding focus and blur events

Author: JedWatson

docs/events.md

@@ -32,6 +32,16 @@ selectize.off('event_name', handler);
 		<td valign="top">value</td>
 		<td valign="top">Invoked when the value of the control changes.</td>
 	</tr>
+	<tr>
+		<td valign="top"><code>"focus"</code></td>
+		<td valign="top"></td>
+		<td valign="top">Invoked when the control gains focus.</td>
+	</tr>
+	<tr>
+		<td valign="top"><code>"blur"</code></td>
+		<td valign="top"></td>
+		<td valign="top">Invoked when the control loses focus.</td>
+	</tr>
 	<tr>
 		<td valign="top"><code>"item_add"</code></td>
 		<td valign="top">value, $item</td>

src/selectize.js

@@ -280,7 +280,9 @@ $.extend(Selectize.prototype, {
 			'option_clear'   : 'onOptionClear',
 			'dropdown_open'  : 'onDropdownOpen',
 			'dropdown_close' : 'onDropdownClose',
-			'type'           : 'onType'
+			'type'           : 'onType',
+			'focus'          : 'onFocus',
+			'blur'           : 'onBlur'
 		};
 
 		for (key in callbacks) {
@@ -489,7 +491,8 @@ $.extend(Selectize.prototype, {
 	 */
 	onFocus: function(e) {
 		var self = this;
-
+		var wasFocused = self.isFocused;
+		
 		self.isFocused = true;
 		if (self.isDisabled) {
 			self.blur();
@@ -500,6 +503,8 @@ $.extend(Selectize.prototype, {
 		if (self.ignoreFocus) return;
 		if (self.settings.preload === 'focus') self.onSearchChange('');
 
+		if (!wasFocused) self.trigger('focus');
+
 		if (!self.$activeItems.length) {
 			self.showInput();
 			self.setActiveItem(null);
@@ -517,9 +522,13 @@ $.extend(Selectize.prototype, {
 	 */
 	onBlur: function(e) {
 		var self = this;
+		var wasFocused = self.isFocused;
+
 		self.isFocused = false;
 		if (self.ignoreFocus) return;
 
+		if (wasFocused) self.trigger('blur');
+
 		self.close();
 		self.setTextboxValue('');
 		self.setActiveItem(null);