usePreviewSearch
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
preview search queryフックを使って、preview searchウィジェットのデータをリクエスト・取得してください。
Requestパラメータ
名称
種類
概要
keyphrase
ストリング
検索する文字列
suggestionsList
文字列の配列
提案リスト
itemsPerPage
整数
ページ上のアイテム数。
ジェネリック応答
{ widgetRef, actions: { onItemClick, onKeyphraseChange }, queryResult: { isFetching, isLoading, data: { content: articles = , suggestion: { content_name_context_aware: articleSuggestions = , content_trending_category: trendingCategorySuggestions = , } = {}, } = {}, }, }
輸入
import { usePreviewSearch } from '@sitecore-search/react';
例
import type { PreviewSearchInitialState, PreviewSearchWidgetQuery, SearchResponseSuggestion, } from '@sitecore-search/react';
import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
type ArticleModel = { id: string; name: string; image_url: string; url: string; source_id?: string; };
articles: Array
type InitialState = PreviewSearchInitialState<'itemsPerPage' | 'suggestionsList'>;
export const PreviewSearchComponent = ({ defaultItemsPerPage = 6 }) => { const { widgetRef, actions: { onItemClick, onKeyphraseChange }, queryResult: { isFetching, isLoading, data: { content: articles = , suggestion: { content_name_context_aware: articleSuggestions = , content_trending_category: trendingCategorySuggestions = , } = {}, } = {}, }, } = usePreviewSearch<ArticleModel, InitialState>({ query: (query
) => query, state: { suggestionsList: { suggestion: 'content_name_context_aware', max: 10 }, { suggestion: 'content_trending_category', max: 10 }, , itemsPerPage: defaultItemsPerPage, }, });const loading = isLoading || isFetching;
return (
!重要suggestionsListパラメータ内の各提案はkeyphrase_fallbackブールパラメータをサポートしています。 trueに設定された場合、検索結果がない場合は最初のsuggestion blockの最初の提案を代替キーワードとしてSearch使用します。サンプルコードのスニペットをご覧ください:
... state: { suggestionsList: { suggestion: 'title_context_aware', max: 10, keyphrase_fallback: true}, itemsPerPage: defaultItemsPerPage, }, ...
!注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。
コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。
!注注意事項これらのReactリソースは、あなたの実装に役立ちます:
ウィジェットの動作例を見るには、Search JS SDKとUIコンポーネントパッケージを使って作成された スターターキットのウェブサイト をご覧ください。
GitHubリポジトリをダウンロードまたはフォークできます。