Aloha！我少女人妻 Uerica！中秋節快樂啊～！小時候中秋節的晚上我都會跟月亮許願，感覺下一次月圓願望就會實現了！很靈驗喔大家可以試試，這次我就許希望鐵人賽成功完賽吧！哈哈

一個好的搜尋頁面不能僅是調整搜尋優化，篩選與過濾功能的設計也是很重要的喔！

Facet 篩選面板

Facets 我實在不知道怎麼翻譯，感覺篩選面板最貼切吧，總之就是我們搜尋後側邊欄會出現篩選與過濾選項那塊～

在篩選面板中，可以定義需要被篩選的欄位，以及形態，形態有分為值 value 與範圍 range ，首先我們會在 configurationOptions 中設定有哪些欄位需要被過濾與篩選。前面已經有範例的講解，不過這邊講解一下設定細節！

disjunctiveFacets 析取

原本我們做篩選時，如果type是value時，點擊其中一個選項，其他選項的欄位就會被過濾掉，像圖中所示， PLATFORM 中有 PS、PS2、PS3、PS4 四個選項，但點了PS2後過濾掉其他的只剩PLATFORM是PS2的結果

但有時候我們欄位存的是多選的結果，不能僅過濾掉其他的只剩點選的結果。打個比方～這是知名住宿網站的篩選，從圖中可以看到，這個結果可以是飯店，也可以是8分以上，這時我們就可以使用 disjunctiveFacets

以剛剛的例子，首先我們將disjunctiveFacets定義在configurationOptions，disjunctiveFacets 的資料 type 是 array。

const configurationOptions = {
	...
	searchQuery: {
		disjunctiveFacets: [ "platform" ],
	  facets: {
		platform: { type: "value", size: 100 }
	  }
	}
  };

再來我們要在 SearchProvider 中的 Layout 定義組件

  <SearchProvider config = {configurationOptions}>
      <Layout
        sideContent={
          <div>
            <Facet field="platform" label="Platform" />
          </div>
        }
      />
    </SearchProvider>

然後我們就看到，可以變成多選的篩選了～

filterType 過濾類型

過濾類型分為 all 、 any 、 none

• all: 點選後全部的值都符合
• any: 點選後任一值符合
• none: 點選後代表過濾掉這個值

預設值為 all ，我們來舉個例子踹看看～

const configurationOptions = {
	...
	searchQuery: {
	  facets: {
		user_score: {
        type: "range",
        ranges: [
			{ from: 0, to: 3,name: "0 - 3" },
          { from: 3, to: 7, name: "3 - 7" },
          { from: 3, to: 9, name: "3 - 9" },
          { from: 9, to: 10, name: "9 - 10" }
        ]
      },
	}
  };

filterType 是 Facet 的屬性

<Facet field="user_score" label="User Score" filterType="any" />

我們可以看到搜尋出來的選項，3-7分有3個 3-9分的有28個

all: 點選後全部的值都符合，代表一定要符合 3-9 與 3-7 的選項，所以結果筆數只剩三筆

any: 點選後任一值符合，代表 3-9 與 3-7 的選項任一符合即可，所以結果共有 28 筆

none: 點選後過濾掉這個值，代表過濾所有符合 3-9 與 3-7 選項的所有資料

今天先到這邊，明天再繼續排序的部分哈哈！感謝閱讀～大家趕快去吃烤肉吧！記得烤熟再刷醬才不會焦阿！明天見摟～掰掰