Customize Algolia Places

Hello,

We are using this algolia places npm package (https://www.npmjs.com/package/places.js/v/1.16.1).

Is it possible to customize the current functionality of algolia places to transform the search results?

We have a react application that uses both react-instantsearch and places.js.

This is the use case we are trying to achieve:

Allow the places.js input box to search thru an additional facet value (in additional to its default location).

One approach that was contemplated was to use algoliasearch npm package for both places and the index and combine the results - but this loses the html widget functionality provided by places.js:

  1. algoliasearch.initPlaces().search(params)
  2. index.searchForFacetValues({ facetName, facetQuery })
  3. Combine results from 1. and 2.

If there is a proper way to implement this or another solution, please let us know. Thanks in advance!

Hi there,

From the Algolia Places documentation (https://community.algolia.com/places/documentation.html#instantsearchjs) we describe how we can use Places with InstantSearch.js.

Also, from our InstantSearch.js documentation, we have a guide on how to do a “Multi index search” https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/multi-index-search/js/ which seems appropriate in your case :slight_smile:

I hope it will help you!

Don’t hesitate,
Best

Hello,

I don’t believe this would fix this issue. If you think otherwise, can you provide some examples? How do I incorporate the usage of Places with React InstantSearch? Is there an exported React component?

Also, I don’t see how the “Multi Index Search” would resolve this. We’re not trying to search multiple indices but 1 index with multiple filters (lat/lng and/or section facet)

I think the issue is trying to use places.js (https://www.npmjs.com/package/places.js/v/1.16.1) and have it include an additional parameter to filter on (section for our example).

Hi Bsubedi,

Just to make sure that I have fully understood your use-case correctly: You would like to search for an address in Places.js and in the facets for an index that you own with a single search input. Is that correct?

Additionally, you are using React InstantSearch.

If my understanding is correct, this can be a bit tricky to solve, but I think I may have a few ways of solving this.

I believe a first step would be to have a look at this example from the places documentation: https://community.algolia.com/places/examples.html#places--custom-data As you can see from this example, it is possible to combine places.js with another dataset using autocomplete.js. That being said, the default search behaviour for autocomplete is to integrate with regular queries instead of facet filters, so you would have to adapt this to handle this particularity.

Otherwise, it might be simpler to create a fully custom widget which would be a combination of a refinement list and the places widget. I believe this guide could help you get started on this: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react/

The implementation of the refinementList and places widgets could maybe also be helpful for you in your implementation:

I hope this helps!