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来实现这一点 .
1 回答
如果您对Searchkit使用日期过滤器组件,则可以实现此目的,如下所示:
A calendar-style date filter component for Searchkit
class App扩展了SearchkitComponent
{
渲染()
{
<DIV> <DateRangeFilter ID = “EVENT_DATE” title =“日期范围” fromDateField = “event_date.from” toDateField = “event_date.to” calendarComponent = {DateRangeCalendar} fieldOptions = {{ 类型:'嵌入', 选项:{ 路径:'event_date' } }} /> </ DIV> } } 属性fromDateField(ESField):必需 . 用作开头的弹性搜索日期字段 . toDateField(ESField):必需 . 用作结束的弹性搜索日期字段 . id(string):必需 . 组件的id . 必须是独特的 . 用作url序列化 Headers 的键(字符串):必需 . 用于组件和选定过滤器组件的 Headers calendarComponent(ReactComponent):呈现时使用的日历组件与DateRangeCalendar兼容默认为DateRangeFilterInput,它只显示两个日期数学输入字段fieldOptions({type:“embedded | nested | children”,options:Object配置存储在ElasticSearch中的类型字段,可以嵌入或嵌套或子类型:嵌套需要options.path提供的类型:children需要options.childType提供请参阅Searchkit文档中的字段选项rangeFormatter((count:number)=> string | number)用于将数字转换为更易读的显示值的格式化程序函数 . 例如 . 长号格式或前缀货币 . 您可以在日期过滤器代码存储库中找到完整描述:此处和此处 .
上面代码部分的完整示例可以找到 here .
我希望它对你有所帮助 . 祝好运!