iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1
Elastic Stack on Cloud

少女人妻的30天Elastic系列 第 16

【少女人妻的30天Elastic】Day 16 : Elastic App Search_Search UI 組件屬性使用_3

  • 分享至 

  • xImage
  •  

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


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

Facet 篩選面板

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

Schema

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

disjunctiveFacets 析取

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

Schema

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

Schema

以剛剛的例子,首先我們將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>

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

Schema

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個
Schema

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

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

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

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


上一篇
【少女人妻的30天Elastic】Day 15 : Elastic App Search_Search UI 組件屬性使用_2
下一篇
【少女人妻的30天Elastic】Day 17 : Elastic App Search_Search UI 組件屬性使用_4
系列文
少女人妻的30天Elastic30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言