highlight search results

public/css/style.less

@@ -832,7 +832,6 @@ body .navbar .nodebb-inline-block {
 
 .search-result-post {
   width: 100%;
-  height: 50px;
   line-height: 16px;
   padding: 5px;
   overflow:hidden;
@@ -843,7 +842,5 @@ body .navbar .nodebb-inline-block {
     height:48px;
     padding-right:10px;
   }
-  span {
-    padding-left:10px;
-  }
+
 }

public/src/forum/search.js

@@ -0,0 +1,14 @@
+(function() {
+
+	$(document).ready(function() {
+		var searchQuery = $('#topics-container').attr('data-search-query');
+		
+		$('.search-result-text').each(function(){
+			var text = $(this).html();
+			var regex = new RegExp(searchQuery, 'gi');
+			text = text.replace(regex, '<span class="label label-success">'+searchQuery+'</span>');
+			$(this).html(text);
+		});
+	});
+
+})();

public/templates/search.tpl

@@ -12,7 +12,7 @@
 
 <div class="category row">
 	<div class="span12">
-		<ul id="topics-container">
+		<ul id="topics-container" data-search-query="{search_query}">
 		<!-- BEGIN posts -->
 		<a href="../../topic/{posts.topicSlug}#{posts.pid}" id="tid-{posts.tid}">
 			<li class="category-item">
@@ -20,7 +20,7 @@
 					<div class="span12 img-polaroid">
 						<div class="search-result-post">
 							<img src="{posts.picture}" />
-							<strong>{posts.username}</strong>: {posts.content}
+							<strong>{posts.username}</strong>: <span class="search-result-text">{posts.content}</span>
 						</div>
 
 					</div>
@@ -31,6 +31,5 @@
 		</ul>
 	</div>
 </div>
-<!--
+
 <script type="text/javascript" src="{relative_path}/src/forum/search.js"></script>
--->