site: algolia

2024-12-15 04:42:23 +08:00 · 2021-11-25 03:21:54 +08:00 · 2021-11-25 03:21:54 +08:00 · 2b75be77b6
commit 2b75be77b6
parent 3359de513c
3 changed files with 35 additions and 2 deletions
--- 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"
--- 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>
--- 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>
                    )
                  }
                }}