highlight autocomplete results

highlight autocomplete results

Author: ciur

app/components/search/autocomplete-item/index.hbs

@@ -1,5 +1,10 @@
-<li {{on "click" this.onClick}}>
-  <div class="icon {{@item.type}}"></div>
-  <div class="title">{{@item.title}}</div>
-  <div class="path text-muted">{{@item.path}}</div>
-</li>
+<li
+  {{on "click" this.onClick}}>
+  <div class="d-flex flex-row">
+    <div class="icon {{@item.type}}"></div>
+    <div class="title">{{@item.title}}</div>
+    <div class="path text-muted">{{@item.path}}</div>
+  </div>
+</li>
+<div class="text-muted px-3 pb-3" {{textToDom @item.highlight}}>
+</div>

app/components/search_results/document/index.hbs

@@ -6,9 +6,7 @@
       {{@result_node.title}}
     </LinkTo>
   </div>
-
   <Node::Tags
     @tags={{this.tags}}
     @more_than_max_visible_tags={{this.more_than_max_visible_tags}} />
-
-</div>
+</div>

app/modifiers/text_to_dom.js

@@ -0,0 +1,49 @@
+import Modifier from 'ember-modifier';
+
+
+export default class TextToDom extends Modifier {
+  /*
+  Converts plain text to HTML DOM elements and inserts them
+  as children to `this.element`
+
+  Autocomplete receives text matching highlights as plain text e.g.
+
+    "This is <em>great</em> match".
+
+  Besides the fact that you cannot style plain text, it is also
+  rendered with <em> tag.
+  To fix this problem hightlight text is converted to DOM nodes.
+  */
+  didReceiveArguments() {
+
+    let text = this.args.positional[0],
+      template,
+      nodes,
+      that = this,
+      em_element,
+      text_element;
+
+    // inspired from https://stackoverflow.com/a/35385518
+    // HTML5's <template> tag can be used to convinently convert
+    // text into DOM nodes
+    template = document.createElement('template');
+    template.innerHTML = text;
+
+    // voila!
+    nodes = template.content.childNodes;
+
+    nodes.forEach(node => {
+      // is it <em>some match</em> ?
+      if (node.nodeName == 'EM') {
+        em_element = document.createElement('em');
+        em_element.textContent = node.firstChild.textContent;
+        that.element.appendChild(em_element);
+      } else {
+        // otherwise node is a plain text
+        text_element = document.createTextNode(node.textContent);
+        that.element.appendChild(text_element);
+      }
+    });
+  }
+
+}

app/styles/search.scss

@@ -20,6 +20,13 @@
     padding: 0;
     z-index: 1;
 
+    .text-muted {
+      em {
+        color: green;
+        font-weight: bold;
+      }
+    }
+
     li:hover {
       background-color: #e9e9e9;
       border-left: 1px solid #0d6efd;