不同 JS 框架中的吉他和弦搜索

这些网站展示了如何在不同的 JavaScript 框架中使用 Typesense，数据集包含 552 个吉他和弦的 2141 种指法形状。

NuxtJS

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 NuxtJS 中设置 vue-instantsearch。
• 这里 (opens new window)展示了如何使用自定义命中结果模板。

Next.js app router

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 Next.js app router 中设置 react-instantsearch。如果你想在 page.tsx 中使用 Server Component，请将搜索组件移到单独的文件中，并确保在文件顶部包含 'use client' 指令。
• 这里 (opens new window)展示了如何使用自定义命中结果模板。

Angular v15 版本

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何配置 angular-instantsearch。
• 这里 (opens new window)展示了如何使用自定义命中结果模板。
• 这里 (opens new window)展示了如何创建"加载更多"按钮并在到达最后一页时禁用。

原生 JavaScript 版本

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 Vite 中配置 instantsearch.js。
• 这里 (opens new window)展示了如何使用自定义命中结果模板。

Astro 版本

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 Astro 中使用 instantsearch.js。注意需要将其包裹在 <script> 标签中。

SolidJS

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 SolidJS 中使用 instantsearch.js。请确保将其包裹在 onMount 或 createEffect 函数中。

Remix

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何配合浏览器环境变量 (opens new window)配置 Typesense Instantsearch Adapter (opens new window)。
• 这里 (opens new window)展示了如何在 Remix 中使用 react-instantsearch（无 SSR 支持）。

SvelteKit

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 SvelteKit 中使用 instantsearch.js。请确保将其包裹在 onMount 函数中。

Qwik

在线演示 (opens new window) | 源代码 (opens new window)

• 这里 (opens new window)展示了如何在 Qwik 中使用 instantsearch.js。注意要将其包裹在 useVisibleTask$ 中。

React Native

源代码 (opens new window)

• 这里 (opens new window)展示了如何展示无限滚动结果。
• 这里 (opens new window)展示了如何创建带有 showmore 和 searchable 属性的 RefinementList 组件。
• 这里 (opens new window)展示了如何在模态框中创建带有精炼列表的过滤器。