Filter List
FilterListConnector.All( filters: List<Filter>, filterState: FilterState, selectionMode: SelectionMode, groupID: FilterGroupID )
About this widget
FilterList
is a filtering view that displays any kind of filters, and lets users refine the search results by selecting them.
Compared to the RefinementList
, which takes its values from the search response facets, this widget displays filters that you add yourself.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class MyActivity: AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val price = Attribute("price")
val filters = listOf(
Filter.Numeric(price, 5..10),
Filter.Tag("coupon"),
Filter.Facet(color, "red"),
Filter.Facet(color, "black"),
Filter.Numeric(price, NumericOperator.Greater, 100)
)
val groupAll = groupAnd(all)
val filterListConnector = FilterListConnector.All(
filters = filters,
filterState = filterState,
groupID = groupAll
)
val connection = ConnectionHandler(filterListConnector, searcher.connectFilterState(filterState))
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val filterListView: FilterListView.All = MyFilterListAdapter() // your `FilterListView.All` implementation
connection += filterListConnector.connectView(filterListView)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connection.disconnect()
searcher.cancel()
}
}
Low-level API
If you want to fully control the FilterList
components and connect them manually, use the following components:
Searcher
: TheSearcher
that handles your searches.FilterState
: The current state of the filters.FilterListViewModel.All
: The logic applied to the filters.FilterListView.All
: The view that renders the filters.FilterPresenter
: Optional. The presenter to customize the display of the filters.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val price = Attribute("price")
val filters = listOf(
Filter.Numeric(price, 5..10),
Filter.Tag("coupon"),
Filter.Facet(color, "red"),
Filter.Facet(color, "black"),
Filter.Numeric(price, NumericOperator.Greater, 100)
)
val viewModel = FilterListViewModel.All(filters)
val connection = ConnectionHandler()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val view: FilterListView.All = MyFilterListAdapter() // your `FilterListView.All` implementation
connection += searcher.connectFilterState(filterState)
connection += viewModel.connectFilterState(filterState)
connection += viewModel.connectView(view)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connection.disconnect()
searcher.cancel()
}
}
Compose UI
InstantSearch provides the FilterListState
as a state model, which is an implementation of the FilterListView
interface.
You need to connect FilterListState
to the FilterListConnector
or FilterListViewModel
like any other FilterListView
implementation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class MyActivity: AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val price = Attribute("price")
val filters = listOf(
Filter.Numeric(price, 5..10),
Filter.Tag("coupon"),
Filter.Facet(color, "red"),
Filter.Facet(color, "black"),
Filter.Numeric(price, NumericOperator.Greater, 100)
)
val groupAll = groupAnd(all)
val filterListState = FilterListState<Filter>()
val filterList = FilterListConnector.All(
filters = filters,
filterState = filterState,
groupID = groupAll
)
val connections = ConnectionHandler(filterList)
init {
connections += searcher.connectFilterState(filterState)
connections += filterList.connectView(filterListState)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
filterListState.items.forEach { selectableFacet ->
FilterRow( // your own UI composable to display `SelectableItem<Filter>`
selectableFilter = selectableFacet,
onClick = { filterListState.onSelection?.invoke(it) }
)
}
}
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connections.disconnect()
searcher.cancel()
}
}
Parameters
filters
|
type: List<Filter>
Required
The filters to display. |
filterState
|
type: FilterState
Required
The |
selectionMode
|
type: SelectionMode
default: Multiple
Optional
Whether the list can have |
groupID
|
type: FilterGroupID
default: FilterGroupID(FilterOperator.And)
Optional
The identifier for the group of filters. |
View
view
|
type: FilterListView.All
Optional
The view that renders the filters. |
||
Copy
|