搜索栏 Sapper - 在页面之间传递搜索查询

Question

我正在摆弄 sapper，我正在尝试执行以下操作：

如你所见，我有一个搜索栏，它存在于所有网站中，我想做的是，当用户键入超过 3 个字母时，立即向服务器查询用户输入的任何内容并显示结果.搜索栏位于我的 _layout.svelte.

中调用的组件 SearchBar.svelte 中

例如，假设用户是主页 (index.svelte)，他可以在其中看到幻灯片和一些文本块。当用户在搜索栏中输入内容时，所有内容（幻灯片、块文本等）都会消失，取而代之的是显示搜索结果（如果用户继续输入更多内容，它会不断更新）。

我不确定如何使用 sapper 正确地做到这一点，任何人都可以指出正确的方法吗？ 谢谢！

目前我正在做的是使用

goto("/search?q="+searchQuery);

在SearchBar.svelte组件中，在新页面（Search.svelte）查询服务器并显示结果，这就产生了一个问题，因为不仅看起来不是最优雅的解决方案，而且搜索栏的输入也会失去焦点，所以如果用户在页面导航期间继续书写，它就不会更新查询

Answer 1

您可以将搜索结果作为单独的页面添加到 _layout.svelte:

<SearchBox bind:searchTerm />

{#if searchTerm}
  <SearchResults {searchTerm}/>
{:else}
  <slot></slot>
{/if}

这样焦点会很好地保持并且嵌入到每个页面中。