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

【问题标题】：Search bar Sapper - passing search query between pages搜索栏 Sapper - 在页面之间传递搜索查询
【发布时间】：2020-04-18 23:26:57
【问题描述】：

我正在搞乱工兵，我正在尝试执行以下操作：

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

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

我不确定如何使用 sapper 正确执行此操作，有人可以指出正确的方法吗？谢谢！

目前我正在做的是使用

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

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

【问题讨论】：

【解决方案1】：

您可以将搜索结果添加为_layout.svelte 中的替代块，而不是单独的页面：

<SearchBox bind:searchTerm />

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

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

【讨论】：