Use separate container for search results

client/css/style.css

@@ -1219,6 +1219,10 @@ kbd {
 	content: "Users";
 }
 
+#chat .user-mode-search:before {
+	content: "Search Results";
+}
+
 #loading {
 	font-size: 14px;
 	z-index: 1;

client/js/lounge.js

@@ -1069,11 +1069,15 @@ $(function() {
 
 	chat.on("input", ".search", function() {
 		const value = $(this).val();
-		const names = $(this).closest(".users").find(".names");
+		const parent = $(this).closest(".users");
+		const names = parent.find(".names-original");
+		const container = parent.find(".names-filtered");
 
-		names.find(".user").each((i, el) => {
+		if (!value.length) {
-			$(el).text($(el).text().replace(/<\/?b>;/, "")).hide();
+			container.hide();
-		});
+			names.show();
+			return;
+		}
 
 		const fuzzyOptions = {
 			pre: "<b>",
@@ -1081,13 +1085,14 @@ $(function() {
 			extract: el => $(el).text()
 		};
 
-		fuzzy.filter(
+		const result = fuzzy.filter(
 			value,
 			names.find(".user").toArray(),
 			fuzzyOptions
-		).forEach(el => {
+		);
-			$(el.original).html(el.string).show();
+
-		});
+		names.hide();
+		container.html(templates.user_filtered({matches: result})).show();
 	});
 
 	chat.on("msg", ".messages", function(e, target, msg) {

client/views/index.js

@@ -30,4 +30,5 @@ module.exports = {
 	toggle: require("./toggle.tpl"),
 	unread_marker: require("./unread_marker.tpl"),
 	user: require("./user.tpl"),
+	user_filtered: require("./user_filtered.tpl"),
 };

client/views/user.tpl

@@ -2,8 +2,9 @@
 <div class="count">
 	<input class="search" placeholder="{{users users.length}}" aria-label="Search among the user list">
 </div>
+<div class="names names-filtered"></div>
 {{/if}}
-<div class="names">
+<div class="names names-original">
 	{{#diff "reset"}}{{/diff}}
 	{{#each users}}
 		{{#diff mode}}

client/views/user_filtered.tpl

@@ -0,0 +1,5 @@
+<div class="user-mode user-mode-search">
+{{#each matches}}
+	<span role="button" class="{{original.className}}">{{{string}}}</span>
+{{/each}}
+</div>