Highlight matched text in Collaborator list

tonybaroneee · Sep 26, 2015 · 9fdeb68 · 9fdeb68
1 parent 23dba03
commit 9fdeb68
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/flourish.css b/flourish.css
@@ -40,4 +40,8 @@ input[type="text"].people-search {
 input[type="text"].people-search:focus {
   border-color: transparent;
   border-bottom-color: #ccc;
-}
+}
+
+.match-highlight {
+  background-color: #ffff00;
+}
diff --git a/flourish.js b/flourish.js
@@ -65,9 +65,18 @@ function runFlourish(evt) {
         var searchInput = e.currentTarget.value.toLowerCase();
         $('.x-card-collaborators-select').each(function(i, el) {
           var $el = $(el),
-            match = $el.find('.x-collaborator-select-tooltip-content').text().toLowerCase().indexOf(searchInput) > -1
-          if (match) $el.show()
-          else $el.hide()
+            $contentEl = $el.find('.name-text'),
+            text = $contentEl.text().trim(),
+            index = text.toLowerCase().indexOf(searchInput),
+            isMatch = index > -1;
+          if (isMatch) {
+            $contentEl.html(makeHighlightHtml(text, index, index + searchInput.length));
+            $el.show();
+          }
+          else {
+            $el.hide();
+            $contentEl.html($contentEl.text());
+          }
         });
       });
 
@@ -78,4 +87,11 @@ function runFlourish(evt) {
       }, 111);
     }
   }
+
+  function makeHighlightHtml(text, startIndex, endIndex) {
+    var prefix = text.substring(0, startIndex),
+      match = text.substring(startIndex, endIndex),
+      suffix = text.substring(endIndex);
+    return prefix + '<span class="match-highlight">' + match + '</span>' + suffix;
+  }
 }