Merge pull request #1764 from scott-joe/master

Adds ability to cancel repeater search

js/repeater.js

@@ -76,7 +76,8 @@
 		this.$pageSize.selectlist();
 		this.$primaryPaging.find('.combobox').combobox();
 		this.$search.search({
-			searchOnKeyPress: this.options.searchOnKeyPress
+			searchOnKeyPress: this.options.searchOnKeyPress,
+			allowCancel: this.options.allowCancel
 		});
 
 		this.$filters.on('changed.fu.selectlist', function (e, value) {
@@ -105,6 +106,14 @@
 				pageIncrement: null
 			});
 		});
+		this.$search.on('canceled.fu.search', function (e, value) {
+			self.$element.trigger('canceled.fu.repeater', value);
+			self.render({
+				clearInfinite: true,
+				pageIncrement: null
+			});
+		});
+
 		this.$secondaryPaging.on('blur.fu.repeater', function (e) {
 			self.pageInputChange(self.$secondaryPaging.val());
 		});
@@ -273,8 +282,7 @@
 			//if there are no items
 			if (parseInt(this.$count.html()) !== 0) {
 				this.$pageSize.selectlist('enable');
-			}
-			else {
+			} else {
 				this.$pageSize.selectlist('disable');
 			}
 
@@ -633,11 +641,13 @@
 					self.$loader.hide().loader('pause');
 					self.enable();
 
+					self.$search.trigger('rendered.fu.repeater');
 					self.$element.trigger('rendered.fu.repeater', {
 						data: data,
 						options: dataOptions,
 						renderOptions: options
 					});
+
 					//for maintaining support of 'loaded' event
 					self.$element.trigger('loaded.fu.repeater', dataOptions);
 				});
@@ -838,7 +848,8 @@
 		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,
-		searchOnKeyPress: false
+		searchOnKeyPress: false,
+		allowCancel: true
 	};
 
 	$.fn.repeater.viewTypes = {};

js/search.js

@@ -33,6 +33,7 @@
 
 	var Search = function (element, options) {
 		this.$element = $(element);
+		this.$repeater = $(element).closest('.repeater');
 		this.options = $.extend({}, $.fn.search.defaults, options);
 
 		if (this.$element.attr('data-searchOnKeyPress') === 'true'){
@@ -46,11 +47,14 @@
 		this.$button.on('click.fu.search', $.proxy(this.buttonclicked, this));
 		this.$input.on('keyup.fu.search', $.proxy(this.keypress, this));
 
+		if (this.$repeater.length > 0) {
+			this.$repeater.on('rendered.fu.repeater', $.proxy(this.clearPending, this));
+		}
+
 		this.activeSearch = '';
 	};
 
 	Search.prototype = {
-
 		constructor: Search,
 
 		destroy: function () {
@@ -73,7 +77,7 @@
 			}
 
 			this.activeSearch = searchText;
-			this.$element.addClass('searched');
+			this.$element.addClass('searched pending');
 			this.$element.trigger('searched.fu.search', searchText);
 		},
 
@@ -82,18 +86,26 @@
 				this.$icon.removeClass('glyphicon-remove').addClass('glyphicon-search');
 			}
 
+			if (this.$element.hasClass('pending')) {
+				this.$element.trigger('canceled.fu.search');
+			}
+
 			this.activeSearch = '';
 			this.$input.val('');
-			this.$element.removeClass('searched');
 			this.$element.trigger('cleared.fu.search');
+			this.$element.removeClass('searched pending');
+		},
+
+		clearPending: function () {
+			this.$element.removeClass('pending');
 		},
 
 		action: function () {
 			var val = this.$input.val();
+
 			if (val && val.length > 0) {
 				this.search(val);
-			}
-			else {
+			} else {
 				this.clear();
 			}
 		},
@@ -102,10 +114,9 @@
 			e.preventDefault();
 			if ($(e.currentTarget).is('.disabled, :disabled')) return;
 
-			if(this.$element.hasClass('searched')) {
+			if (this.$element.hasClass('pending') || this.$element.hasClass('searched')) {
 				this.clear();
-			}
-			else {
+			} else {
 				this.action();
 			}
 		},
@@ -118,15 +129,12 @@
 			if (e.which === ENTER_KEY_CODE) {
 				e.preventDefault();
 				this.action();
-			}
-			else if(e.which === TAB_KEY_CODE) {
+			} else if (e.which === TAB_KEY_CODE) {
 				e.preventDefault();
-			}
-			else if(e.which === ESC_KEY_CODE) {
+			} else if (e.which === ESC_KEY_CODE) {
 				e.preventDefault();
 				this.clear();
-			}
-			else if(this.options.searchOnKeyPress) {
+			} else if (this.options.searchOnKeyPress) {
 				// search on other keypress
 				this.action();
 			}
@@ -135,7 +143,10 @@
 		disable: function () {
 			this.$element.addClass('disabled');
 			this.$input.attr('disabled', 'disabled');
-			this.$button.addClass('disabled');
+
+			if (!this.options.allowCancel) {
+				this.$button.addClass('disabled');
+			}
 		},
 
 		enable: function () {
@@ -171,7 +182,8 @@
 
 	$.fn.search.defaults = {
 		clearOnEmpty: false,
-		searchOnKeyPress: false
+		searchOnKeyPress: false,
+		allowCancel: false
 	};
 
 	$.fn.search.Constructor = Search;

test/repeater-test.js

@@ -166,6 +166,36 @@ define(function(require){
 		});
 	});
 
+	test("should handle canceling search correctly", function () {
+		var count = -1;
+		var $repeater = $(this.$markup);
+		var $search = $repeater.find('.repeater-search');
+		$repeater.repeater({
+			dataSource: function(options, callback){
+				count++;
+				switch (count){
+					case 0:
+						equal(options.search, undefined, 'search value not passed to dataSource initially as expected');
+						callback({});
+						$search.find('input').val('something');
+						$search.trigger('searched.fu.repeater');
+						break;
+					case 1:
+						equal(options.search, 'something', 'correct search value passed to dataSource upon searching');
+						callback({});
+						$search.find('input').val('');
+						$search.trigger('canceled.fu.repeater');
+						break;
+					case 2:
+						equal(options.search, undefined, 'search value not passed to dataSource after canceling');
+						callback({});
+						break;
+				}
+			},
+			dropPagingCap: 3
+		});
+	});
+
 	test("should handle views correctly", function () {
 		var hasCalledDS = false;
 		var $repeater = $(this.$markup);