From 119da5582ff774cacd74c1ec8c147c742636e69d Mon Sep 17 00:00:00 2001
From: Lukas Leisten <lukas.leisten@sap.com>
Date: Fri, 14 Mar 2025 16:42:51 +0100
Subject: [PATCH] feat(search): Change span to LocalSearchBoxItem

---
 docs/en/reference/default-theme-search.md     | 21 +++++++++++++++++++
 .../app/components/LocalSearchBoxItem.ts      | 13 ++++++++++++
 src/client/app/index.ts                       |  2 ++
 .../components/VPLocalSearchBox.vue           |  4 ++--
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/client/app/components/LocalSearchBoxItem.ts

diff --git a/docs/en/reference/default-theme-search.md b/docs/en/reference/default-theme-search.md
index d647e32e..9bae9ce7 100644
--- a/docs/en/reference/default-theme-search.md
+++ b/docs/en/reference/default-theme-search.md
@@ -187,6 +187,27 @@ export default defineConfig({
 })
 ```
 
+### Custom Local Search Box Item Component
+
+If you want to customize the search result items in the local search page, you can override the `LocalSearchBoxItem` component similarly:
+
+```js
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme';
+import CustomLocalSearchBoxItem from './components/CustomLocalSearchBoxItem.vue';
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('LocalSearchBoxItem', CustomLocalSearchBoxItem);
+  }
+};
+```
+
+#### Creating a Custom `LocalSearchBoxItem`
+
+To create your own `LocalSearchBoxItem`, define a Vue component that accepts a `content` prop and renders it inside a chosen HTML tag, such as a `<span>`. This allows you to control how search results are displayed while keeping the default functionality.
+
 ## Algolia Search
 
 VitePress supports searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Refer their getting started guide. In your `.vitepress/config.ts` you'll need to provide at least the following to make it work:
diff --git a/src/client/app/components/LocalSearchBoxItem.ts b/src/client/app/components/LocalSearchBoxItem.ts
new file mode 100644
index 00000000..f2a1c4c9
--- /dev/null
+++ b/src/client/app/components/LocalSearchBoxItem.ts
@@ -0,0 +1,13 @@
+import { defineComponent, h } from 'vue'
+
+export const LocalSearchBoxItem = defineComponent({
+  props: {
+    content: {
+      type: String,
+      required: true
+    }
+  },
+  render() {
+    return h('span', { innerHTML: this.content })
+  }
+})
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 2c38b416..7524fa5a 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -18,6 +18,7 @@ import { dataSymbol, initData, siteDataRef, useData } from './data'
 import { RouterSymbol, createRouter, scrollTo, type Router } from './router'
 import { inBrowser, pathToFile } from './utils'
 import { SidebarTextItem } from './components/SidebarTextItem'
+import { LocalSearchBoxItem } from './components/LocalSearchBoxItem'
 
 function resolveThemeExtends(theme: typeof RawTheme): typeof RawTheme {
   if (theme.extends) {
@@ -80,6 +81,7 @@ export async function createApp() {
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
   app.component('SidebarTextItem', SidebarTextItem)
+  app.component('LocalSearchBoxItem', LocalSearchBoxItem)
 
   // expose $frontmatter & $params
   Object.defineProperties(app.config.globalProperties, {
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index b348de54..54e4e124 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -526,11 +526,11 @@ function onMouseMove(e: MouseEvent) {
                     :key="index"
                     class="title"
                   >
-                    <span class="text" v-html="t" />
+                    <LocalSearchBoxItem class="text" :content="t" />
                     <span class="vpi-chevron-right local-search-icon" />
                   </span>
                   <span class="title main">
-                    <span class="text" v-html="p.title" />
+                    <LocalSearchBoxItem class="text" :content="p.title" />
                   </span>
                 </div>