Vue-instantsearch: Feature: RefinementList add searchForFacetValues

[zoransa]

Feature: What is your use case for such a feature?
instantsearch.js already has searchForFacetValues and it is very handy to be able to quickly reduce very long lists of facets.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
Just add search box under facet title and two settings
searchForFacetValues: { Placeholder: 'Refine list...', templates: { noResults: '<div>Hey bro, we do not have that!</div>' } }
Basically the same like searchForFacetValues in instantsearch.js

[rayrutjes]

Thanks for submitting this.
Indeed, search for facet values would be a nice addition to this library.

We will need to investigate what the best option could be.

I'm wondering if the state of the facetValues should reside in the search store of if that should be a component concern.

I'll leave this open for further discussions.

What use case do you have in mind @zoransa ? Do you have an example of live website?

[emiridev]

Hi @zoransa @rayrutjes ,
something like this (Brand RefinementList at the left side)
https://www.beautyalmanac.com/products/search

[rayrutjes]

Thanks for the link @emiridev .
That is definitely a nice use case.

I think there are 2 subjects here.

1. make sure we can easily leverage the "getFacetValues" Algolia endpoint & figure out where the implementation should reside
2. see how this can be used from inside existing components by keeping in mind that we would like to keep components as granular and composable as possible.

There are also other features like the "show more" button that would be a nice addition.

[zoransa]

If we look at the main library they use search-box widget
https://github.com/algolia/instantsearch.js/blob/develop/src/widgets/refinement-list/refinement-list.js

[rayrutjes]

Yes, there is definitely something to explore in composing with existing components.

[emiridev]

@rayrutjes @zoransa is there any news about integration of "searchForFacetValues" for vue-instantsearch?

[rayrutjes]

Hey @emiridev ,

We have not yet started to dig the search for facet values.

Do you only use that feature in the context of your refinement list?

[emiridev]

Yes, exactly.

[rayrutjes]

Ok,

We want to the take search for facet values very seriously.

Filtering facet values of a refinement list is only one use case, and we want to make sure our implementation can also meet other expectations.

The first step will be to add and method to the search store's API, and play a bit with it.
Second step will be to check the best way to provide the feature you are looking for without complexifying the refinement list component.

[emiridev]

Great, I'm really looking forward to it! tnx @rayrutjes

[peteleco]

Hi, i was able to apply url params this way.
At ais-results set a reference

<ais-results ref="filterResult">

Use a computed to preset a list of available params

computed: { facetFilters: ['tag.value', 'venue.neighborhood'] }

And at mounted() function i run a verification and apply a facet filter if defined at url

this.facetFilters.forEach((filter) => { if (this.$route.query[filter]) { this.$refs.filterResult.searchStore.toggleFacetRefinement(filter, this.$route.query[filter]); } });

[ghost]

Sweet @peteleco ! Thank you! I've been trying to figure this out for almost two days now, and this did the trick!

[Arvind6353]

Hi Team ,

Any update on the support of searchForFacetValues for refinementList ?

[JustinSainton]

@rayrutjes Just adding a voice of support for adding this feature to this repo. This would be massively helpful.

[Haroenv]

Hey hey, this is available in the alpha of v2, you can try it out here: https://github.com/algolia/vue-instantsearch/pull/416

[JustinSainton]

@Haroenv Thanks for that, seeing this error on the console after following migration instructions: Unknown custom element:

Full console log:
```vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/App.vue

warn @ vue.esm.js?efeb:591
vue.esm.js?efeb:3147 Uncaught TypeError: It looks like you forgot to wrap your Algolia search component
"" inside of an "" component.
at VueComponent.default (vue-instantsearch.esm.js?31d6:1)
at resolveInject (vue.esm.js?efeb:3681)
at initInjections (vue.esm.js?efeb:3633)
at VueComponent.Vue._init (vue.esm.js?efeb:4627)
at new VueComponent (vue.esm.js?efeb:4798)
at createComponentInstanceForVnode (vue.esm.js?efeb:4310)
at init (vue.esm.js?efeb:4131)
at createComponent (vue.esm.js?efeb:5608)
at createElm (vue.esm.js?efeb:5555)
at createChildren (vue.esm.js?efeb:5682)```

[Haroenv]

Can you make a new issue with a reproducible codeSandbox please? Maybe you didn’t update the dependency?

[lizkaraffa]

@Haroenv here is issue 535 with the codeSandbox you requested @JustinSainton to create. Thanks!

[JustinSainton]

Thanks @Haroenv - if you look at Codebox, it seems that it follows the migration path required, but we keep getting error messages that seem to indicate that different components require being wrapped in ais-index.

e.g. TypeError
It looks like you forgot to wrap your Algolia search component
"" inside of an "" component.

Thoughts on that?

[Haroenv]

I updated the documentation before I released a new alpha, sorry for that, later today I’ll publish the version with “ais-instant-search”. In the mean time, use “ais-index”. See also the linked issue for more info :)

[Haroenv]

https://v2--vue-instantsearch.netlify.com/components/refinementlist#props searchable on ais-refinement-list now does this