Guides / Building Search UI / Troubleshooting

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

Why is my uiState ignored?

The uiState passed to initialUiState or via routing needs to be nested per index. For example, if you only have a root index called “instant_search”, you should use a value like { instant_search: { query: '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 does dynamic faceting cause an extra request?

When the dynamicWidgets receives results, it mounts the chosen widgets for that result. An initial search does two network requests. This is because adding a new widget requires a new network request, to know what the refinements are for a facet.

You can avoid this by forcing all facets to be returned by Algolia, or even all facets that you maximally want to display the results of. You can force all facets to be returned by Algolia by creating a proxy of the search client as in the conditional requests guide.

1
2
3
4
5
6
7
const searchClient = algoliasearch('YourApplicationID', 'YourAPIKey');
const search = searchClient.search;
searchClient.search = function(queries) {
  // request all facets
  queries[0].params.facets = '*';
  return search(queries);
};

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

Why is search.refresh() not working?

When the search result is the same, some components (templates) may skip re-render.

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

How can I hide a filter with only one facet value?

You can use a panel widget to access the results, and use the hidden function to hide a refinement based on how many facet values it has:

1
2
3
4
5
6
7
8
9
instantsearch.widgets.panel({
  hidden(options) {
    const facetValues = options.results.getFacetValues('brand');
    return Array.isArray(facetValues) ? facetValues.length <= 1 : false;
  },
})(instantsearch.widgets.refinementList)({
  container: '#brand-list',
  attribute: 'brand',
})

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 use the searchFunction to add a condition in which you don’t call helper.search().

Did you find this page helpful?