Aloha！我是少女人妻 Uerica！這幾天都一直下雨，家裡的狗狗都快發霉了～大家應該都以為狗狗需要奔跑玩拋接遊戲才能消耗精力吧，其實玩嗅聞遊戲 ( 藏零食或玩具給狗狗找 ) 或益智玩具 ( 嗅聞墊、寵物桌遊等 ) 不但能消耗狗狗精力、體力，還能穩定狗狗情緒喔！～！

今天要來講解， SearchProvider 的部分，在 configurationOptions 定義後，資料在 Layout 的表現就要在 SearchProvider 這邊定義了～

SearchProvider

export default function App() {
  return (
    <SearchProvider config={configurationOptions}>
      <div className="App">
        <Layout
			header={<SearchBox />}
			bodyContent={<Results titleField="name" urlField="image_url" />}
			sideContent={
				<div>
				<Sorting
					label={"Sort by"}
					sortOptions={[
					{
						name: "Relevance",
						value: "",
						direction: ""
					},
					{
						name: "Name",
						value: "name",
						direction: "asc"
					}
					]}
				/>
				<Facet field="user_score" label="User Score" />
				<Facet field="critic_score" label="Critic Score" />
				<Facet field="genre" label="Genre" />
				<Facet field="publisher" label="Publisher" isFilterable={true} />
				<Facet field="platform" label="Platform" />
				</div>
			}
			bodyHeader={
				<>
				<PagingInfo />
				<ResultsPerPage />
				</>
			}
			bodyFooter={<Paging />}
			/>
      </div>
    </SearchProvider>
  );
}

1. 傳遞 configurationOptions 給 SearchProvider
2. configurationOptions 中在Facet有定義五個部分，所以在SearchProvider中我們也要創建五個Facet組件
3. 將 search ui 中提供的 ui 組件設定並寫入 Layout 對應區塊

在前面我們從 @elastic/react-search-ui import 了下列基本組件 :

• SearchBox : 搜尋框
• Results : 搜尋結果顯示
• PagingInfo : 在當前頁面上顯示信息
• ResultsPerPage : 下拉選單選擇每頁顯示多少筆資料，可選20、40、60筆
• Paging : 分頁
• Facet : 以數據類型的方式過濾和瀏覽數據。
• Sorting : 以自定義方式排序

import 後，可以將組件放置到 Layout 中。 Layout 將頁面分成多個區塊 :

• header : 搜索框
• bodyContent : 搜尋結果區塊
• sideContent : 側邊欄，其中包含 facet 和 sort 選項
• bodyHeader : 與搜尋結果相關的訊息，位於 bodyContent 上方，例如當前頁面和每頁結果筆數
• bodyFooter : bodyContent 下方，分頁資訊，可在頁面之間快速導航

今天就到這邊瞜，感謝大家閱讀，接下來會開始介紹Search UI 有哪些與 App Search API 可以使用瞜～我要去吸狗了，掰掰大家明天見～