Guides / Building Search UI / Troubleshooting

Angular InstantSearch FAQ

How to use float values in a rating menu widget?

The ratingMenu doesn’t support float values. We recommend storing an integer representation of this value in your records (e.g., 0.5 * 10 = 5) and display the original value in your UI.

How to search from the n-th character?

To search only when the query is longer than a certain length, you can implement a proxy search client. Then, you can add a condition (e.g., query.length > 3).

Why is my uiState ignored?

The uiState only works when the widgets responsible for each UI state attribute are mounted. For instance, a searchBox widget is necessary to provide a query.

How do I change the name of a key in routing?

If you want to change, for example, “query into “q” in routing, you need to use the stateMapping functions to:

  • first, in stateToRoute, return an object containing “q” for the query,
  • then, in routeToState, replace that “q” again with “query”.

How do I group facet values one-to-many?

If you want to group, for example, “turquoise”, “ocean” and “sky” under “blue”, the recommended solution is to group them at indexing time. You can either add the group name as a separate attribute to globally filter on, or add both values in an array to make both the group and the individual value show up in the list.

For example, with the following dataset:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "objectID": "1",
    "color": "turquoise"
  },
  {
    "objectID": "2",
    "color": "ocean"
  },
  {
    "objectID": "3",
    "color": "sky"
  }
]

You could create an additional attribute and use it for faceting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "objectID": "1",
    "color": "turquoise",
    "colorGroup": "blue"
  },
  {
    "objectID": "2",
    "color": "ocean",
    "colorGroup": "blue"
  },
  {
    "objectID": "3",
    "color": "sky",
    "colorGroup": "blue"
  }
]

Or you could list the individual colors and their groups so you can use them both for faceting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
  {
    "objectID": "1",
    "color": [
      "turquoise",
      "blue"
    ]
  },
  {
    "objectID": "2",
    "color": [
      "ocean",
      "blue"
    ]
  },
  {
    "objectID": "3",
    "color": [
      "sky",
      "blue"
    ]
  }
]

Did you find this page helpful?