Add search on keypress, clear input when value unchanged

index.html

@@ -2019,7 +2019,7 @@ <h2 class="header">Year</h2>
 			<section id="search">
 				<h2>Search</h2>
 				<div class="thin-box">
-					<div class="search input-group" data-initialize="search" role="search" id="mySearch">
+					<div class="search input-group" data-initialize="search" data-searchOnKeyPress="true" role="search" id="mySearch">
 						<input type="search" class="form-control" placeholder="Search" />
 						<span class="input-group-btn">
 									<button class="btn btn-default" type="button">

index.js

@@ -610,10 +610,6 @@ define(function (require) {
 				});
 			}
 
-			// if(options.search){
-			// resp.items = [];
-			// }
-
 			// call and simulate latency
 			setTimeout(function () {
 				callback(resp);
@@ -622,6 +618,7 @@ define(function (require) {
 
 		// initialize repater
 		$('#myRepeater').repeater({
+			searchOnKeyPress: true,
 			dataSource: function (options, callback) {
 				if (options.view === 'list') {
 					list(options, callback);
@@ -857,6 +854,9 @@ define(function (require) {
 	$('#mySearch').on('searched.fu.search', function (event, text) {
 		log('Searched: ' + text);
 	});
+	$('#mySearch').on('cleared.fu.search', function (event, text) {
+		log('cleared search');
+	});
 
 
 	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

js/repeater.js

@@ -72,7 +72,9 @@
 		this.$filters.selectlist();
 		this.$pageSize.selectlist();
 		this.$primaryPaging.find('.combobox').combobox();
-		this.$search.search();
+		this.$search.search({
+			searchOnKeyPress: this.options.searchOnKeyPress
+		});
 
 		this.$filters.on('changed.fu.selectlist', function (e, value) {
 			self.$element.trigger('filtered.fu.repeater', value);
@@ -793,7 +795,8 @@
 		defaultView: -1,	//should be a string value. -1 means it will grab the active view from the view controls
 		dropPagingCap: 10,
 		staticHeight: -1,	//normally true or false. -1 means it will look for data-staticheight on the element
-		views: null			//can be set to an object to configure multiple views of the same type
+		views: null,		//can be set to an object to configure multiple views of the same type,
+		searchOnKeyPress: false
 	};
 
 	$.fn.repeater.viewTypes = {};

js/search.js

@@ -35,13 +35,16 @@
 		this.$element = $(element);
 		this.options = $.extend({}, $.fn.search.defaults, options);
 
+		if (this.$element.attr('data-searchOnKeyPress') === 'true'){
+			this.options.searchOnKeyPress = true;
+		}
+
 		this.$button = this.$element.find('button');
 		this.$input = this.$element.find('input');
 		this.$icon = this.$element.find('.glyphicon');
 
 		this.$button.on('click.fu.search', $.proxy(this.buttonclicked, this));
-		this.$input.on('keydown.fu.search', $.proxy(this.keypress, this));
-		this.$input.on('keyup.fu.search', $.proxy(this.keypressed, this));
+		this.$input.on('keyup.fu.search', $.proxy(this.keypress, this));
 
 		this.activeSearch = '';
 	};
@@ -87,52 +90,45 @@
 
 		action: function () {
 			var val = this.$input.val();
-			var inputEmptyOrUnchanged = (val === '' || val === this.activeSearch);
-
-			if (this.activeSearch && inputEmptyOrUnchanged) {
-				this.clear();
-			} else if (val) {
+			if (val && val.length > 0) {
 				this.search(val);
 			}
+			else {
+				this.clear();
+			}
 		},
 
 		buttonclicked: function (e) {
 			e.preventDefault();
 			if ($(e.currentTarget).is('.disabled, :disabled')) return;
-			this.action();
-		},
 
-		keypress: function (e) {
-			if (e.which === 13) {
-				e.preventDefault();
+			if(this.$element.hasClass('searched')) {
+				this.clear();
+			}
+			else {
+				this.action();
 			}
 		},
 
-		keypressed: function (e) {
-			var remove = 'glyphicon-remove';
-			var search = 'glyphicon-search';
-			var val;
+		keypress: function (e) {
+			var ENTER_KEY_CODE = 13;
+			var TAB_KEY_CODE = 9;
+			var ESC_KEY_CODE = 27;
 
-			if (e.which === 13) {
+			if (e.which === ENTER_KEY_CODE) {
 				e.preventDefault();
 				this.action();
-			} else if (e.which === 9) {
+			}
+			else if(e.which === TAB_KEY_CODE) {
 				e.preventDefault();
-			} else {
-				val = this.$input.val();
-
-				if (val !== this.activeSearch || !val) {
-					this.$icon.removeClass(remove).addClass(search);
-					if (val) {
-						this.$element.removeClass('searched');
-					} else if (this.options.clearOnEmpty) {
-						this.clear();
-					}
-
-				} else {
-					this.$icon.removeClass(search).addClass(remove);
-				}
-
+			}
+			else if(e.which === ESC_KEY_CODE) {
+				e.preventDefault();
+				this.clear();
+			}
+			else if(this.options.searchOnKeyPress) {
+				// search on other keypress
+				this.action();
 			}
 		},
 
@@ -174,7 +170,8 @@
 	};
 
 	$.fn.search.defaults = {
-		clearOnEmpty: false
+		clearOnEmpty: false,
+		searchOnKeyPress: false
 	};
 
 	$.fn.search.Constructor = Search;

test/search-test.js

@@ -70,27 +70,6 @@ define(function(require){
 		equal(clearedEventFired, true, 'cleared event was fired');
 	});
 
-	test("should process sequential searches", function () {
-		var $search = $(html);
-		var searchText = '';
-
-		$search.search().on('searched.fu.search', function (e, text) { searchText = text; });
-
-		$search.find('input').val('search text');
-		$search.find('button').click();
-
-		equal($search.find('.glyphicon').attr('class'), 'glyphicon glyphicon-remove', 'search icon has changed');
-		equal(searchText, 'search text', 'search text was provided in event');
-
-		$search.find('input').val('search text 2').keyup();
-		equal($search.find('.glyphicon').attr('class'), 'glyphicon glyphicon-search', 'search icon has returned');
-
-		$search.find('button').click();
-
-		equal($search.find('.glyphicon').attr('class'), 'glyphicon glyphicon-remove', 'search icon has changed');
-		equal(searchText, 'search text 2', 'search text was provided in event');
-	});
-
 	test("should correctly respond to disable and enable methods", function () {
 		var $search = $(html);