首页 文章

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

提问于
浏览
7

Searchkit中的 DynamicRangeFilter 是一个很好的简单解决方案,例如过滤年 . 您只需在Elasticsearch中保存一年字段并使用过滤器:

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

到目前为止,我还没有找到如何使用它来过滤多值属性,例如一系列的岁月 . 想象一下,你有一个 startend 的持续时间属性:

[
  {
    "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 回答

  • 2

    如果您对Searchkit使用日期过滤器组件,则可以实现此目的,如下所示:

    A calendar-style date filter component for Searchkit

    此Searchkit过滤器允许用户根据选定的开始时间和可选的结束时间过滤开始日期范围 . 有关工作示例,请参阅演示目录 . 日期范围过滤所需的Searchkit组件最初是在MIT许可下发布的 . 安装npm install --save-dev searchkit-datefilter
    示例从“searchkit”导入
    ;
    从“searchkit-datefilter”导入{DateRangeFilter,DateRangeCalendar}

    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 .

    我希望它对你有所帮助 . 祝好运!

相关问题