Feature Request: Document Search Submit button

[pateljoel]

Is your feature request related to a problem? Please describe 🙏

I am trying to create a simple submit/refine button for a site using React Algolia, currently unable to or not sure how this works in Algolia.

Describe the solution you'd like 🤔

An example of creating a search submit button in the documentation.

Describe alternatives you've considered ✨

Most of the examples show a search bar, (E-Commerce Example) but in my usecase this isn't applicable to my needs.

[Haroenv]

Unfortunately InstantSearch is modelled around automatic applying of all search filters. that means that the approach for not applying things automatically isn't really documented.

however, if it really makes sense for your use case to not automatically apply, what you do is the following:

1. save the result of onSearchStateChange in a local state
2. apply that to searchState when the submit button is pressed

[pateljoel]

@Haroenv Ah, I'll have a look into those options then, just a last question:

I have a <Configure /> widget like the following below:

<Configure 
  hitsPerPage={10} 
  facetFilters={filters}
  numericFilters={numericFilters}
  attributesToRetrieve={[ 'name', 'pet_type']}
/>

And I would like to dynamically search on the facet values in React with the configure widget on submitting a button e.g. ['pet_type:dog'], ['pet_type:cat'], ['pet_type:fish'].

Is there an example of this in action? I've searched the Algolia documentation for this for days on end for this example to no avail.

[Haroenv]

For that use case, https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react/#virtual-widgets with <VirtualRefinementList attribute="pet_type" defaultRefinement={['cat', 'dog', 'fish']}/> would seem like it fits the best. You can render that refinement list or its default refinement conditionally based on your button.

Otherwise you can also use the refine function passed to connectRefinementList.

To better understand what you're trying to do, do you have your current code in a sandbox? We have a regular starter sandbox available for that: here. Thanks!

As said, since the pattern of not applying refinements automatically isn't one that we designed InstantSearch around, we don't have any examples available of it unfortunately

[pateljoel]

Thanks, @Haroenv,

Is are there any examples of onSearchStateChange being used instead with Algolia?

Thanks.

[Haroenv]

only in the context of routing, sorry: https://github.com/algolia/react-instantsearch/tree/master/examples/react-router

[sarahdayan]

I'm keeping this issue open because this is an interesting use case that we already chatted about internally, and having references to user requests can be a good base if we get around and decide to tackle it.

[oliverbeck-dev]

hi, any news about this topic? I'm also interested in it (vue instantsearch)

[dhayab]

Hi @oliverbeck-dev, InstantSearch still doesn't support on-demand update. For now Haroen's suggestion is the way to go. You can get more information on :on-state-change for Vue InstantSearch in the API reference.

[oliverbeck-dev]

hi @dhayab, thx a lot for your fast reply and your hint. I will dig into it

[oliverbeck-dev]

I found a working solution. With a combination of onStateChange and a middleware it's now possible to submit the search by clicking on a button. But what is not yet working is the routing feature:

let localState = {}

function onStateChange({ uiState, setUiState }) {
  localState = uiState
}

function submitSearch({ instantSearchInstance }) {
  return {
    subscribe() {
      document.querySelector('#searchButton').addEventListener('click', (e) => {
        instantSearchInstance.setUiState(localState)
        instantSearchInstance.refresh()
      })
    },
  }
}
</script>

<template>
  <AisInstantSearch
    :search-client="instantSearchClient"
    :on-state-change="onStateChange"
    :middlewares="[submitSearch]"
    :routing="routing"
    :future="{ preserveSharedStateOnUnmount: true }"
    index-name="****"
  >

  </AisInstantSearch>
</template>

I have a routing object which works fine, but when I click on the search button, the url doesn't get updated. any hints how I can achieve this?