Highlight search terms in RemoteSelect

Makes it more obvious why a entry is in the list and complies
to the default highlighting that select2 does if there is no
html template rendering function.

app/javascript/alchemy_admin/components/attachment_select.js

@@ -8,14 +8,15 @@ class AttachmentSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} page
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(attachment) {
+  _renderListEntry(attachment, term) {
     return `
       <div class="attachment-select--attachment">
         <alchemy-icon name="${attachment.icon_css_class}"></alchemy-icon>
-        <span class="attachment-select--attachment-name">${attachment.name}</span>
+        <span class="attachment-select--attachment-name">${this._hightlightTerm(attachment.name, term)}</span>
       </div>
     `
   }

app/javascript/alchemy_admin/components/node_select.js

@@ -18,10 +18,11 @@ class NodeSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} node
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(node) {
+  _renderListEntry(node, term) {
     const ancestors = node.ancestors.map((a) => a.name)
     const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
 
@@ -33,7 +34,7 @@ class NodeSelect extends RemoteSelect {
             ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
           </span>
           <span class="node-select--node-name">
-            ${node.name}
+            ${this._hightlightTerm(node.name, term)}
           </span>
         </div>
         <div class="node-select--node-url">

app/javascript/alchemy_admin/components/page_select.js

@@ -36,15 +36,16 @@ class PageSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} page
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(page) {
+  _renderListEntry(page, term) {
     return `
       <div class="page-select--page">
         <div class="page-select--top">
           <alchemy-icon name="file-3"></alchemy-icon>
-          <span class="page-select--page-name">${page.name}</span>
+          <span class="page-select--page-name">${this._hightlightTerm(page.name, term)}</span>
           <span class="page-select--site-name">${page.site.name}</span>
         </div>
         <div class="page-select--bottom">

app/javascript/alchemy_admin/components/remote_select.js

@@ -62,7 +62,8 @@ export class RemoteSelect extends AlchemyHTMLElement {
       },
       ajax: this.ajaxConfig,
       formatSelection: (item) => this._renderResult(item),
-      formatResult: (item) => this._renderListEntry(item)
+      formatResult: (item, _el, query) =>
+        this._renderListEntry(item, query.term)
     }
   }
 
@@ -126,6 +127,7 @@ export class RemoteSelect extends AlchemyHTMLElement {
   /**
    * html template for each list entry
    * @param {object} item
+   * @param {string} term
    * @returns {string}
    * @private
    */
@@ -134,4 +136,15 @@ export class RemoteSelect extends AlchemyHTMLElement {
       "You need to define a _renderListEntry function on your sub class!"
     )
   }
+
+  /**
+   * hightlighted search term
+   * @param {string} name
+   * @param {string} term
+   * @returns {string}
+   * @private
+   */
+  _hightlightTerm(name, term) {
+    return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+  }
 }

vendor/assets/stylesheets/alchemy_admin/select2.scss

@@ -396,6 +396,7 @@ html[dir="rtl"] .select2-results {
 .select2-results li em {
   background: #feffde;
   font-style: normal;
+  text-decoration: underline;
 }
 
 .select2-results .select2-highlighted em {