在Algolia Instantsearch中输入搜索查询后,如何加载新页面?

时间:2019-04-26 21:38:02

标签: angular ionic-framework algolia instantsearch

因此,我正在使用Algolia进行搜索来构建Ionic 4应用程序,但是在任何地方都找不到概述用户输入查询后如何加载搜索结果的新页面的地方。

我正在使用Instantsearch.js,并且已经能够获取它,因此URL会随着用户在其查询中键入而更新,但是我无法获取它,因此当单击“搜索”按钮时, html页面,将加载一个包含当前查询并显示搜索结果的新页面。

config = {
    ...environment.algolia,
    indexName: 'test',
    routing: {
      router: historyRouter(),
      stateMapping: {
        stateToRoute({query, page}) {
          return {
            query: query,
            page: page
          };
        },
        routeToState({query, page}) {
          return {
            query: query,
            page: page
          };
        }
      }
    }
}

这是我的配置,但我知道它不会加载新页面。有人可以给我提供这种功能的示例吗?我希望在一个页面上有一个即时搜索栏,它可以接受用户输入并将其呈现在URL中,然后单击“搜索”时,可以加载新页面并将URL信息发送到新页面。 >

这是我的搜索条形码:

<ais-instantsearch [config]="config">
    <div>
        <ais-search-box></ais-search-box>
        <ais-hits>
            <ng-template let-hits="hits">
                <ol class="ais-Hits-list">
                    <li *ngFor="let hit of hits" class="ais-Hits-item">
                        <div class="hit-name">
                            <ais-highlight attribute="title" [hit]="hit"></ais-highlight>
                        </div>
                    </li>
                </ol>
            </ng-template>
        </ais-hits>
    </div>
</ais-instantsearch>

我再次尝试获取它,以便用户可以在搜索栏中键入内容,然后单击“搜索”,然后将加载新的搜索结果页面。当前,它只显示所有数据,然后根据输入的查询对它们进行过滤,全部都在同一页面上。

0 个答案:

没有答案