如何为多值属性添加动态范围过滤器？答案

【问题标题】：How to add a Dynamic Range Filter for multi-value property?如何为多值属性添加动态范围过滤器？
【发布时间】：2018-12-11 18:35:05
【问题描述】：

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 来实现这一点。

【问题讨论】：

标签： elasticsearch searchkit

【解决方案1】：

如果您使用 Searchkit 的日期过滤器组件，您可以实现此目的，如下所示：

Searchkit 的日历样式日期过滤器组件

此 Searchkit 过滤器可让用户根据以下条件过滤开始日期范围选择的开始时间和可选的结束时间。

请参阅 demo directory 了解工作示例。

日期范围过滤所需的 Searchkit 组件是最初在 MIT 许可下发布 here。

安装
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)：必需。用作开头的 elasticsearch 日期字段。

toDateField (ESField)：必需。用作结束的 elasticsearch 日期字段。

id （字符串）：必需。组件的 ID。必须是独一无二的。用作url序列化的key

title （字符串）：必需。用于组件和选定过滤器组件的标题

calendarComponent (ReactComponent): 渲染时使用的日历组件

兼容DateRangeCalendar

默认为 DateRangeFilterInput，它只显示两个日期数学输入字段

fieldOptions ({type:"embedded|nested|children", options:Object}) 配置存储在ElasticSearch中的type字段，可以是嵌入或嵌套或子代

type:nested 需要 options.path 提供

type:children 需要 options.childType 提供

请参阅 Searchkit 文档中的 Field Options

rangeFormatter ((count:number)=> string|number) 用于将数字转换为更易读的显示值的格式化函数。例如。长数字格式或货币前缀。`

您可以在日期过滤器代码存储库中找到完整说明：here 和 here。

您可以找到上面代码部分的完整示例here。

希望对你有帮助。祝你好运！

【讨论】：