elasticsearch - 如何为多值属性添加动态范围过滤器?
问题描述
Searchkit 中的DynamicRangeFilter
in Searchkit 是一个很好且简单的解决方案,例如过滤年份。您只需在 Elasticsearch 中保存一年字段并使用过滤器:
<DynamicRangeFilter
field="year"
id="year"
title="Year"
/>
到目前为止,我还没有发现如何使用它来过滤多值属性,例如年份范围。想象一下,您有一个带有start
and的持续时间属性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来实现这一点。
解决方案
如果您使用 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 序列化的 keytitle
(字符串):必需。用于组件和选定过滤器组件的标题
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)用于将数字转换为更易读的显示值的格式化函数。例如长数字格式或前缀货币。`
您可以在此处找到上述代码部分的完整示例。
我希望它对你有帮助。祝你好运!
推荐阅读
- php - PHP数据没有返回,但它确实死了
- java - 如何使用 mediatype “application/x-ndjson” 配置 spring-5 “webclient (with jetty connector)” webflux
- sql - SQL Select - 子查询有多行
- python - 二维数组中的连接组件
- javascript - 无法切换到手风琴
- r - 如何转换具有相同列名的数据框
- ruby - 使用 Nokogiri 从网站抓取时如何访问文本节点
- python - BeautifulSoup:合并表并导出到 .csv
- sql - SQL如何制作原理db mirror和mirror db原理
- arrays - Vue 将多个值存储为数组