Highlight matching string in autosuggest entries.

public/js/autosuggest.js

@@ -116,22 +116,33 @@ class AutoSuggest {
     fillContainer(response) {
         this.selectedIndex = 0;
 
+        let query = this.input.value.trim().replace(/[\-\[\]{}()*+?.,\\\/^\$|#]/g, ' ');
+        let query_tokens = query.split(/ +/).sort((a,b) => a.length - b.length);
+
         response.items.forEach((item, i) => {
             let node = document.createElement('li');
-            let text = document.createTextNode(item.label);
+            node.innerHTML = this.highlightMatches(query_tokens, item.label);
             node.jsondata = item;
             node.addEventListener('click', event => {
                 this.appendCallback(event.target.jsondata);
                 this.closeContainer();
                 this.clearInput();
             });
-            node.appendChild(text);
             this.container.appendChild(node);
             if (this.container.children.length === 1) {
                 node.className = 'selected';
             }
         });
     };
+
+    highlightMatches(query_tokens, item) {
+        let itemTokens = item.split(/ +/);
+        let queryTokens = new RegExp('(' + query_tokens.join('\|') + ')', 'i');
+        itemTokens.forEach((token, index) => {
+            item = item.replace(token, token.replace(queryTokens, ($1, match) => '<strong>' + match + '</strong>'));
+        });
+        return item;
+    };
 }
 
 class TagAutoSuggest extends AutoSuggest {