UI libraries / InstantSearch iOS / Widgets

Filter Map

Signature 
FilterMapConnector(
  searcher: HitsSearcher,
  filterState: FilterState,
  items: [Int: Filter],
  selected: Int,
  attribute: Attribute,
  operator: RefinementOperator,
  groupName: String?
)
See code examples
See demo

About this widget

Components holding a map of filters, and that can apply a single filter at a time.

Examples

Copy 
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

class SearchController {

  let searcher: HitsSearcher
  let filterState: FilterState
  let filterMapConnector: FilterMapConnector<Filter.Facet>
  let controller = SegmentedController<Filter.Facet>(segmentedControl: .init())

  init() {
    let gender: Attribute = "gender"
    let male = Filter.Facet(attribute: "gender", stringValue: "male")
    let female = Filter.Facet(attribute: "gender", stringValue: "female")
    let notSpecified = Filter.Facet(attribute: "gender", stringValue: "not specified")
    let items: [Int: Filter.Facet] = [
      0: male,
      1: female,
      2: notSpecified,
    ]

    self.searcher = HitsSearcher(appID: "YourApplicationID", 
                                 apiKey: "YourAPIKey", 
                                 indexName: "YourIndexName")

    self.filterState = FilterState()
    self.filterMapConnector = .init(searcher: searcher,
                                    filterState: filterState,
                                    items: items,
                                    selected: 0,
                                    attribute: gender,
                                    operator: .or,
                                    controller: controller,
                                    presenter: DefaultPresenter.Filter.present)
    searcher.connectFilterState(filterState)
    searcher.search()
  }

}

Low-level API

If you want to fully control the Filter Map components and connect them manually, use the following components:

  • Searcher: the Searcher that handles searches.
  • FilterState: the current state of the filters.
  • FilterMapInteractor: the logic applied to the filter map.
  • FilterMapController: the view that renders the filter map.
Copy 
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 SearchController {

  let searcher: HitsSearcher
  let filterState: FilterState
  let filterMapInteractor: FilterMapInteractor<Filter.Facet>
  let controller = SegmentedController<Filter.Facet>(segmentedControl: .init())
  
  init() {
    let gender: Attribute = "gender"
    let male = Filter.Facet(attribute: "gender", stringValue: "male")
    let female = Filter.Facet(attribute: "gender", stringValue: "female")
    let notSpecified = Filter.Facet(attribute: "gender", stringValue: "not specified")
    
    self.searcher = HitsSearcher(appID: "YourApplicationID", 
                                 apiKey: "YourAPIKey", 
                                 indexName: "YourIndexName")
    let items: [Int: Filter.Facet] = [
      0: male,
      1: female,
      2: notSpecified,
    ]
    self.filterState = FilterState()
    self.filterMapInteractor = .init(items: items,
                                     selected: 0)
    searcher.connectFilterState(filterState)
    filterMapInteractor.connectSearcher(searcher, attribute: gender)
    filterMapInteractor.connectFilterState(filterState, 
                                           attribute: gender, 
                                           operator: .or)
    filterMapInteractor.connectController(controller, 
                                          presenter: DefaultPresenter.Filter.present)
    searcher.search()
  }

}

Parameters

Parameter Description
searcher
type: HitsSearcher
Required

The Searcher that handles your searches.
filterState
type: FilterState
Required

The FilterState that holds filters.
items
type: [Int: Filter]
Required

The map of filters to be held. The key is an unique identifier for the filter value.
Copy 
1
2
3
4
5
6

let gender = Attribute("gender")
let filters = [
  0: Filter.Facet(attribute: gender, value:  "male"),
  1: Filter.Facet(attribute: gender, value: "female")
  2: Filter.Facet(attribute: gender, value: "not specified")
]
selected
type: Int
Required

The key of the filter selected by default.
attribute
type: Attribute
Required

The attribute to filter.
operator
type: RefinementOperator
Required

Whether facets are combined with and or or behavior in filterState. For example if you select color as the attribute and an or behavior,
the filter sent to Algolia is color:red OR color:green.
groupName
type: String?
default: .none
Optional

Filter group name.

Controller

Parameter Description
controller
type: SelectableSegmentController
Required

The view that renders the filter map.
presenter
default: DefaultPresenter.Filter.present
Optional

How to display filters.
Copy 
1
2
3

let controller = SegmentedController<Filter.Facet>(segmentedControl: .init())
let presenter = DefaultPresenter.Filter.present
filterMap.connectController(controller, presenter: presenter)
Did you find this page helpful?
InstantSearch iOS v7