Как сделать мгновенный поиск в Algolia с помощью Vue записей запросов после загрузки страницы - PullRequest
Новая
       5

Как сделать мгновенный поиск в Algolia с помощью Vue записей запросов после загрузки страницы

1 голос
/ 10 января 2020

Я работаю над приложением Gridsome (SSG, созданным с Vue). Я добавил страницу поиска и реализовал мгновенный поиск Algolia с виджетом автозаполнения.

По умолчанию ленивый загружает маршруты и отображает страницы на стороне сервера, а с момента компонента мгновенного поиска я Использование не поддерживает SSR, я обернул его в <ClientOnly> компонент.

Проблема

Когда я перехожу к /search, требуется некоторое время, прежде чем я рендеринг компонентов, это потому что сразу я перехожу на страницу, выполняется скрипт для извлечения контента, который блокирует рендеринг до его завершения. вызывающий плохой UX.

Код 

 <div class="search-page-container">
      <div class="search-field-container">
        <h2><label for="search-field">Search</label></h2>

        <ClientOnly>
          <ais-instant-search :search-client="searchClient" :index-name="INDEX_NAME">
            <ais-autocomplete>
              <div slot-scope="{ currentRefinement, indices, refine }">
                <input id="search-field" type="search" :value="currentRefinement" placeholder="what topic are you looking for?" @input="refine($event.currentTarget.value)" autocomplete="off" />
                <div v-if="currentRefinement">
                  <h4>Articles</h4>
                  <div class="hits">
                    <ul v-for="index in indices" :key="index.label">
                    <li v-show="index.hits.length == 0"><em>No matches...</em></li>
                    <li>
                      <ul>
                        <li v-for="hit in index.hits" :key="hit.objectID">
                          <div>
                            <g-link :to="hit.slug"><ais-highlight attribute="title" :hit="hit"/></g-link>
                            <br>
                            <small class="post-description"><ais-highlight attribute="description" :hit="hit"/></small>
                            <!-- <hr> -->
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  </div>
                </div>
                <div class="space-top" v-else> <p> Type in the box to search for articles.. </p></div>
              </div>
            </ais-autocomplete>
          </ais-instant-search>
        </ClientOnly>

      </div>

Что я хочу

Я хочу, чтобы запросы выполнялись только тогда, когда пользователь начинает печатать, таким образом, это не не блокировать рендеринг.

...