如何為多值屬性添加動態范圍過濾器？

Question

Searchkit中的DynamicRangeFilter是一個很好的簡單解決方案，例如過濾年。 您只需在Elasticsearch中保存一年字段並使用過濾器：

<DynamicRangeFilter
    field="year"
    id="year"
    title="Year"
/>

到目前為止，我還沒有找到如何使用它來過濾多值屬性，例如一系列年份。 想象一下，你有一個具有start和end的持續時間屬性：

[
  {
    "id": 123,
    "title": "Foo",
    "duration": {
      "start": 2013,
      "end": 2016
    }
  },
  {
    "id": 234,
    "title": "Bar",
    "duration": {
      "start": 2015,
      "end": 2015
    }
  },
  {
    "id": 345,
    "title": "Baz",
    "duration": {
      "start": 2017,
      "end": 2020
    }
  }
]

現在，過濾器應該尊重持續時間並顯示范圍內的所有項目。 我不確定是否以及如何使用fieldOptions來實現這一目標。

Answer 1

如果您對Searchkit使用日期過濾器組件，則可以實現此目的，如下所示：

Searchkit的日歷樣式日期過濾器組件

此Searchkit過濾器允許用戶根據選定的開始時間和可選的結束時間過濾開始日期范圍。

有關工作示例，請參閱演示目錄 。

需要的日期范圍過濾Searchkit組件最初發表在這里在MIT許可下。

安裝

 npm install --save-dev searchkit-datefilter 

例

 import { SearchkitComponent } from "searchkit"; import { DateRangeFilter, DateRangeCalendar } from "searchkit-datefilter" class App extends SearchkitComponent { render() { <div> <DateRangeFilter id="event_date" title="Date range" fromDateField="event_date.from" toDateField="event_date.to" calendarComponent={DateRangeCalendar} fieldOptions={{ type: 'embedded', options: { path: 'event_date' } }} /> </div> } } 

屬性

• fromDateField （ESField） ： 必需 。 用作開頭的彈性搜索日期字段。
• toDateField （ESField） ： 必需 。 用作結束的彈性搜索日期字段。
• id （string） ： 必需 。 組件的id。 必須是獨特的。 用作url序列化的密鑰
• title （字符串） ： 必填 。 用於組件和選定過濾器組件的標題

• calendarComponent （ReactComponent）：呈現時使用的日歷組件

  • 與DateRangeCalendar兼容
  • 默認為DateRangeFilterInput ， DateRangeFilterInput顯示兩個日期數學輸入字段

• fieldOptions （{type：“embedded | nested | children”，options：Object}）配置存儲在ElasticSearch中的類型字段，可以嵌入或嵌套或子項

  • type：nested需要options.path提供
  • type：children需要options.childType提供
  • 請參閱Searchkit文檔中的字段選項

• rangeFormatter （（count：number）=> string | number）格式化函數，用於將數字轉換為更易讀的顯示值。 例如長號格式或前綴貨幣

您可以在日期過濾器代碼存儲庫中找到完整描述： 此處和此處 。

您可以在此處找到上面代碼部分的完整示例。

我希望它對你有所幫助。 祝好運！