feat: hightlight matches in quick search

fix title hightlights
NodeBB · Sep 23, 2020 · f2f3ba4 · f2f3ba4
1 parent e09f00b
commit f2f3ba4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 34 deletions.
diff --git a/public/src/app.js b/public/src/app.js
@@ -419,6 +419,10 @@ app.cacheBuster = null;
 						quickSearchResults.toggleClass('hidden', !html.length || !inputEl.is(':focus'))
 							.find('.quick-search-results-container')
 							.html(html.length ? html : '');
+						var highlightEls = quickSearchResults.find(
+							'.quick-search-results .quick-search-title, .quick-search-results .snippet'
+						);
+						search.highlightMatches(options.searchOptions.term, highlightEls);
 						$(window).trigger('action:search.quick.complete', {
 							data: data,
 							options: options,

diff --git a/public/src/client/search.js b/public/src/client/search.js
@@ -13,7 +13,7 @@ define('forum/search', ['search', 'autocomplete', 'storage'], function (searchMo
 			updateFormItemVisiblity(searchIn.val());
 		});
 
-		highlightMatches(searchQuery);
+		searchModule.highlightMatches(searchQuery, $('.search-result-text p, .search-result-text.search-result-title a'));
 
 		$('#advanced-search').off('submit').on('submit', function (e) {
 			e.preventDefault();
@@ -134,39 +134,6 @@ define('forum/search', ['search', 'autocomplete', 'storage'], function (searchMo
 		}
 	}
 
-	function highlightMatches(searchQuery) {
-		if (!searchQuery) {
-			return;
-		}
-		searchQuery = utils.escapeHTML(searchQuery.replace(/^"/, '').replace(/"$/, '').trim());
-		var regexStr = searchQuery.split(' ')
-			.map(function (word) { return utils.escapeRegexChars(word); })
-			.join('|');
-		var regex = new RegExp('(' + regexStr + ')', 'gi');
-
-		$('.search-result-text p, .search-result-text h4').each(function () {
-			var result = $(this);
-			var nested = [];
-
-			result.find('*').each(function () {
-				$(this).after('<!-- ' + nested.length + ' -->');
-				nested.push($('<div></div>').append($(this)));
-			});
-
-			result.html(result.html().replace(regex, function (match, p1) {
-				return '<strong class="search-match">' + p1 + '</strong>';
-			}));
-
-			nested.forEach(function (nestedEl, i) {
-				result.html(result.html().replace('<!-- ' + i + ' -->', function () {
-					return nestedEl.html();
-				}));
-			});
-		});
-
-		$('.search-result-text').find('img:not(.not-responsive)').addClass('img-responsive');
-	}
-
 	function handleSavePreferences() {
 		$('#save-preferences').on('click', function () {
 			storage.setItem('search-preferences', JSON.stringify(getSearchDataFromDOM()));

diff --git a/public/src/modules/search.js b/public/src/modules/search.js
@@ -106,6 +106,39 @@ define('search', ['navigator', 'translator', 'storage'], function (nav, translat
 		}
 	};
 
+	Search.highlightMatches = function (searchQuery, els) {
+		if (!searchQuery || !els.length) {
+			return;
+		}
+		searchQuery = utils.escapeHTML(searchQuery.replace(/^"/, '').replace(/"$/, '').trim());
+		var regexStr = searchQuery.split(' ')
+			.map(function (word) { return utils.escapeRegexChars(word); })
+			.join('|');
+		var regex = new RegExp('(' + regexStr + ')', 'gi');
+
+		els.each(function () {
+			var result = $(this);
+			var nested = [];
+
+			result.find('*').each(function () {
+				$(this).after('<!-- ' + nested.length + ' -->');
+				nested.push($('<div></div>').append($(this)));
+			});
+
+			result.html(result.html().replace(regex, function (match, p1) {
+				return '<strong class="search-match">' + p1 + '</strong>';
+			}));
+
+			nested.forEach(function (nestedEl, i) {
+				result.html(result.html().replace('<!-- ' + i + ' -->', function () {
+					return nestedEl.html();
+				}));
+			});
+		});
+
+		$('.search-result-text').find('img:not(.not-responsive)').addClass('img-responsive');
+	};
+
 	Search.queryTopic = function (tid, term) {
 		socket.emit('topics.search', {
 			tid: tid,