Highlight search term in variant select

AlchemyCMS · May 28, 2024 · ca4d033 · ca4d033
1 parent 0e4d6de
commit ca4d033
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
@@ -9,15 +9,19 @@ $.fn.alchemyVariantSelect = function (options) {
       : variant.name
   }
 
-  function formatResult(variant) {
+  function formatResult(variant, _el, query) {
+    const matchTerm = new RegExp(query.term, "gi")
+    const formatMatch = (match) => `<em>${match}</em>`
+    const name = variant.name.replace(matchTerm, formatMatch)
+    const sku = variant.sku.replace(matchTerm, formatMatch)
     return `
       <div class="variant-select-result">
         <div>
-          <span>${variant.name}</span>
+          <span>${name}</span>
         </div>
         <div>
           <span>${variant.options_text}</span>
-          <span>${variant.sku}</span>
+          <span>${sku}</span>
         </div>
       </div>
     `