Highlight search text

Author: haideriqbal

frontend/src/app/util.ts

@@ -65,3 +65,24 @@ export function toCamel(str: string) {
     return $1.toUpperCase().replace("-", "").replace("_", "");
   });
 }
+
+/**
+ * Highlights the query text within the target text by wrapping matches in <mark> tags
+ * @param text The text to search in
+ * @param query The search query to highlight
+ * @returns HTML string with highlighted matches
+ */
+export function highlightMatch(text: string, query: string): string {
+  if (!query || !text) {
+    return text;
+  }
+
+  // Escape special regex characters in the query
+  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  // Create a case-insensitive regex to find all occurrences
+  const regex = new RegExp(`(${escapedQuery})`, 'gi');
+
+  // Replace matches with highlighted version
+  return text.replace(regex, '<mark>$1</mark>');
+}

frontend/src/components/SearchBox.tsx

@@ -3,7 +3,7 @@ import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { get, getPaginated } from "../app/api";
 import { theme } from "../app/mui";
-import { randomString, thingFromJsonProperties } from "../app/util";
+import { randomString, thingFromJsonProperties, highlightMatch } from "../app/util";
 import Entity from "../model/Entity";
 import Ontology from "../model/Ontology";
 import { Suggest } from "../model/Suggest";
@@ -175,7 +175,11 @@ export default function SearchBox({
               setQuery(autocomplete.autosuggest);
             }}
           >
-            {autocomplete.autosuggest}
+            <span
+              dangerouslySetInnerHTML={{
+                __html: highlightMatch(autocomplete.autosuggest, query)
+              }}
+            />
           </li>
         ),
       };
@@ -216,9 +220,13 @@ export default function SearchBox({
                   to={linkUrl}
                 >
                   <div className="flex justify-between">
-                    <div className="truncate flex-auto" title={name}>
-                      {name}
-                    </div>
+                    <div
+                      className="truncate flex-auto"
+                      title={name}
+                      dangerouslySetInnerHTML={{
+                        __html: highlightMatch(name, query)
+                      }}
+                    />
                     <div className="truncate flex-initial ml-2 text-right">
                       <span
                         className="mr-2 bg-link-default px-3 py-1 rounded-lg text-sm text-white uppercase"
@@ -277,9 +285,10 @@ export default function SearchBox({
                       title={
                         jumpToEntry.getName() || jumpToEntry.getOntologyId()
                       }
-                    >
-                      {jumpToEntry.getName() || jumpToEntry.getOntologyId()}
-                    </div>
+                      dangerouslySetInnerHTML={{
+                        __html: highlightMatch(jumpToEntry.getName() || jumpToEntry.getOntologyId(), query)
+                      }}
+                    />
                     <div className="truncate flex-initial ml-2 text-right">
                       <span className="bg-link-default px-3 py-1 rounded-lg text-sm text-white uppercase">
                         {jumpToEntry.getOntologyId()}

frontend/src/index.css

@@ -1361,3 +1361,11 @@ filter: gray;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+
+/* Highlight matching text in autocomplete */
+mark {
+  background-color: #fef08a; /* Tailwind yellow-200 */
+  color: inherit;
+  padding: 0;
+  font-weight: 600;
+}