Панель поиска Sapper - прохождение поискового запроса между страницами - PullRequest
Новая
       12

Панель поиска Sapper - прохождение поискового запроса между страницами

0 голосов
/ 18 апреля 2020

Я возлюсь с сапером и пытаюсь сделать следующее:

enter image description here

Как видите, у меня есть поиск Панель, которая существует на всех веб-сайтах, я хочу, чтобы, когда пользователь печатал более 3 букв, немедленно запрашивал сервер о том, что пользователь вставил, и отображал результат. Панель поиска находится в компоненте SearchBar.svelte, который вызывается в моем _layout.svelte.

Так, например, предположим, что пользователь является домашней страницей (index.svelte), где он видит слайд-шоу и несколько блочных текстов. Когда пользователь вводит данные в строке поиска, все это исчезает (слайд-шоу, blocktexts и т. Д. c), и вместо этого отображается результат поиска (и он будет обновляться, если пользователь продолжит писать).

Я не уверен, как правильно сделать это с сапером, кто-нибудь может указать правильный способ сделать это? Спасибо!

В настоящее время я использую 

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

В компоненте SearchBar.svelte и на новой странице (Search.svelte) запрашивает сервер и отображает результат это порождает проблему, поскольку не только не кажется самым элегантным решением, но и ввод строки поиска теряет фокус, поэтому, если пользователь продолжал писать во время навигации по странице, он не обновил бы запрос

1 Ответ

0 голосов
/ 18 апреля 2020

Вместо того, чтобы результаты поиска представляли собой отдельную страницу, вы можете добавить ее в качестве альтернативного блока в _layout.svelte: 

<SearchBox bind:searchTerm />

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

Таким образом, фокус останется приятным и будет встроен в каждую страницу.

...