6

Searchkit 中的DynamicRangeFilterin Searchkit 是一个很好且简单的解决方案，例如过滤年份。您只需在 Elasticsearch 中保存一年字段并使用过滤器：

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

到目前为止，我还没有发现如何使用它来过滤多值属性，例如年份范围。想象一下，您有一个带有startand的持续时间属性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来实现这一点。

4

1 回答 1

2

如果您使用 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 （字符串）：必需。组件的 ID。必须是独一无二的。用作 url 序列化的 key
  • title （字符串）：必需。用于组件和选定过滤器组件的标题

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

    • 兼容DateRangeCalendar
    • 默认值DateRangeFilterInput仅显示两个日期数学输入字段

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

    • type:nested 需要 options.path 提供
    • type:children 需要 options.childType 提供
    • 请参阅Searchkit 文档中的字段选项

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

您可以在日期过滤器代码存储库中找到完整的描述：这里和这里。

您可以在此处找到上述代码部分的完整示例。

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

于 2018-12-14T19:35:06.487 回答