Guides / Building Search UI / Troubleshooting

Angular InstantSearch FAQ

It’s recommended to use the Kotlin API client, which is better suited for Android development.

How to use float values in a rating menu widget?

The ais-rating-menu doesn’t support float values. You can store an integer representation of this value in your records (for example, 0.5 * 10 = 5) and display the original value in your UI.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

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, for example, query.length > 3.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

Why is my uiState ignored?

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

It’s recommended to use the Kotlin API client, which is better suited for Android development.

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”.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

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"
    ]
  }
]

It’s recommended to use the Kotlin API client, which is better suited for Android development.

Why is my facet value disappearing from a refinement list after I select it?

A ais-refinement-list widget displays the most common values for each facet. Sometimes you might have thousands of different values, and it would be impossible to display them all on the UI. You can make the widget searchable to search for more values based on the user’s query.

Each search query might have different common facet values. What’s visible in the refinement widget depends on which facet values are common for that search query. It can happen that you select a facet value for one search, change the search query, and the selected facet value disappears. It might be a rare facet value for the new search query. The refinement is still active, but it’s not shown in the user interface. This can be confusing.

To also show uncommon facet values, ensure that the maximum number of facet values are returned, by using the ais-configure widget. This gives the widget more data to match its refined values with those returned by Algolia. It has no any incidence on the number of items shown—the boundaries set by limit and showMoreLimit still apply.

1
2
3
<ais-configure [searchParameters]="{
  maxValuesPerFacet: 1000
}"></ais-configure>
Did you find this page helpful?