From ca4d0339c8ba88b61cfd609d861f59793c107591 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 28 May 2024 09:36:39 +0200
Subject: [PATCH] Highlight search term in variant select

---
 .../alchemy/solidus/admin/variant_select.js            | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
index c5e894d..acbdc73 100644
--- 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>
     `