diff --git a/demo/SiteHeader.vue b/demo/SiteHeader.vue
index 3f182d72a..fd1c8b4dc 100644
--- a/demo/SiteHeader.vue
+++ b/demo/SiteHeader.vue
@@ -21,7 +21,12 @@
         clear-after-select
         blur-after-select
         @select="handleSearch"
-      />
+      >
+      </n-auto-complete>
+      <!-- TODO: add it -->
+      <!-- template #suffix>
+        <span style="color: var(--placeholder-color)">⌘ + K</span>
+      </template -->
     </div>
     <n-popover
       v-if="isMobile || isTablet"
diff --git a/index.html b/index.html
index a74cfd595..8ac38b9fd 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,15 @@
       type="image/svg+xml"
       href="/demo/assets/images/naivelogo.svg"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
+    />
+    <style>
+      :root {
+        --docsearch-primary-color: #18a058;
+      }
+    </style>
   </head>
   <body>
     <script>
@@ -31,6 +40,20 @@
       deriveTitleFromLocale(pathLocale)
     </script>
     <div id="app"></div>
+    <div id="search" style="display: none"></div>
     <script type="module" src="__INDEX__"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"
+    ></script>
+    <script type="text/javascript">
+      docsearch({
+        appId: 'BH4D9OD16A',
+        apiKey: '692b92ecb31aac9ba46d0574b8f8ba81',
+        indexName: 'naiveui',
+        container: '#search',
+        debug: false // Set debug to true if you want to inspect the modal
+      })
+    </script>
   </body>
 </html>
diff --git a/src/auto-complete/src/AutoComplete.tsx b/src/auto-complete/src/AutoComplete.tsx
index 367163416..1e2125f21 100644
--- a/src/auto-complete/src/AutoComplete.tsx
+++ b/src/auto-complete/src/AutoComplete.tsx
@@ -330,7 +330,12 @@ export default defineComponent({
                         onFocus={this.handleFocus}
                         onUpdateValue={this.handleInput}
                         onBlur={this.handleBlur}
-                      />
+                      >
+                        {{
+                          suffix: this.$slots.suffix,
+                          prefix: this.$slots.prefix
+                        }}
+                      </NInput>
                     )
                   }
                 }}
