代码之家 › 专栏 › 技术社区 › lorenz mac

如何为多值属性添加动态范围筛选器?

searchkit elasticsearch

lorenz mac · 技术社区 · 6 年前

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

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

到目前为止,我还不知道如何用它来过滤一个多值属性,比如一个年份范围。假设有一个duration属性 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 回复 | 直到 6 年前

Bharata colxi 6 年前

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

Searchkit的日历式日期筛选组件

此Searchkit筛选器允许用户根据选定的开始时间和可选的结束时间。

见 demo directory 作为一个有效的例子。

日期范围筛选所需的Searchkit组件有最初出版 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 (埃斯菲尔德) : 要求的 . 要用作开头的elasticsearch日期字段。

toDateField (埃斯菲尔德) : 要求的 . 要用作结尾的elasticsearch日期字段。

id (字符串) : . 组件的id。必须是唯一的。用作url序列化的密钥

title (字符串) : 要求的 . 用于组件和选定筛选器组件的标题

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

与 DateRangeCalendar

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

fieldOptions ({type:“embedded | nested | children”,选项:对象}) 配置ElasticSearch中存储的类型字段,可以是嵌入、嵌套或子级

类型:嵌套需要提供options.path

类型:子项需要选项。提供的子类型

看见 Field Options 在Searchkit文档中

rangeFormatter ((count:number)=>字符串|数字) 一种格式化程序函数,用于将数字转换成更可读的显示值。例如长格式格式化或预固定货币。

您可以在日期筛选代码存储库中找到完整的描述: here 和 here .

上面代码部分的完整示例 here .

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