Minor InstaSearch enhancements

Author: muratcakir

src/Presentation/SmartStore.Web/Scripts/underscore.mixins.js

@@ -281,7 +281,6 @@
 				console.error(err);
 			}
 		}
-		
 	};
 
     // underscore.string mixins

src/Presentation/SmartStore.Web/Themes/Flex/Scripts/public.search.js

@@ -5,7 +5,9 @@
 	// ==========================================================
 
 	$(function () {
-		var box = $('#instasearch');
+		var box = $('#instasearch'),
+			spinner = $('#instasearch-progress');
+
 		if (box.length == 0 || box.data('instasearch') === false)
 			return;
 
@@ -16,13 +18,6 @@
 			url = box.data("url"),
 			keyNav = null;
 
-		var throttledInput = _.throttle(function (e) {
-			var term = box.val();
-			doSearch(term);
-		}, 100);
-
-		box.on('input propertychange paste', throttledInput);
-
 		box.parent().on('click', function (e) {
 			e.stopPropagation();
 		});
@@ -55,34 +50,14 @@
 			closeDrop();
 		});
 
-		function expandBox() {
-			var logoWidth = logo.width();
-			$('body').addClass('search-focused');
-			logo.css('margin-left', (logoWidth * -1) + 'px');
-
-			if (!_.str.isBlank(dropBody.text())) {
-				logo.one(Prefixer.event.transitionEnd, function (e) {
-					openDrop();
-				});
-			}
-		}
-
-		function shrinkBox() {
-			$('body').removeClass('search-focused');
-			logo.css('margin-left', '');
-		}
+		var debouncedInput = _.debounce(function (e) {
+			doSearch(box.val());
+		}, 180, false);
+		box.on('input propertychange paste', debouncedInput);
 
-		function openDrop() {
-			if (!drop.hasClass('open')) {
-				drop.addClass('open');
-				beginKeyEvents();
-			}
-		}
-		
-		function closeDrop() {
-			drop.removeClass('open');
-			endKeyEvents();
-		}
+		// Sometimes a previous search term finishes request AFTER
+		// a subsequent one. We need to skip rendering in this case.
+		var lastTerm;
 
 		function doSearch(term) {
 			if (term.length < minLength) {
@@ -91,19 +66,27 @@
 				return;
 			}
 
-			var spinner = $('#instasearch-progress');
 			if (spinner.length === 0) {
 				spinner = createCircularSpinner(20).attr('id', 'instasearch-progress').appendTo(box.parent());
 			}
 			// Don't show spinner when result is coming fast (< 100 ms.)
 			var spinnerTimeout = setTimeout(function () { spinner.addClass('active'); }, 100)
-			
+
+			// save last entered term in a global variable
+			lastTerm = term;
+
 			$.ajax({
 				dataType: "html",
 				url: url,
 				data: { q: term },
 				type: 'POST',
-				success: function (html) {
+				//cache: true,
+				success: function (html, status, req) {
+					if (lastTerm !== term) {
+						// This is the result of a previous term. Get out!
+						return;
+					}
+
 					if (_.str.isBlank(html)) {
 						closeDrop();
 						dropBody.html('');
@@ -127,6 +110,35 @@
 			});
 		}
 
+		function expandBox() {
+			var logoWidth = logo.width();
+			$('body').addClass('search-focused');
+			logo.css('margin-left', (logoWidth * -1) + 'px');
+
+			if (!_.str.isBlank(dropBody.text())) {
+				logo.one(Prefixer.event.transitionEnd, function (e) {
+					openDrop();
+				});
+			}
+		}
+
+		function shrinkBox() {
+			$('body').removeClass('search-focused');
+			logo.css('margin-left', '');
+		}
+
+		function openDrop() {
+			if (!drop.hasClass('open')) {
+				drop.addClass('open');
+				beginKeyEvents();
+			}
+		}
+		
+		function closeDrop() {
+			drop.removeClass('open');
+			endKeyEvents();
+		}
+
 		function beginKeyEvents() {
 			if (keyNav)
 				return;

src/Presentation/SmartStore.Web/Views/Search/Partials/InstantSearch.TopProducts.cshtml

@@ -25,7 +25,7 @@
 						@if (hasThumbs && hit.ShortDescription.HasValue())
 						{
 							<span class="instasearch-hit-label-secondary d-block text-truncate">
-								@hit.ShortDescription
+								@hit.ShortDescription.RemoveHtml()
 							</span>
 						}
 					</span>