question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to disable auto refinement for select on algolia instant search

See original GitHub issue

I have this current code for integrated algolia ais-instant-search that working fine and i want to disable auto refinement on select input to keep list and when select to return hits for only this selected argument.

<ais-instant-search :search-client="searchClient" :index-name="ALGOLIA_INDEX_NAME" ><ais-menu-select :attribute="attribute" :limit="60"> <select class="select rm-raduis-select is-fullwidth" slot-scope="{ items, canRefine, refine }" :disabled="!canRefine" @change="refine($event.currentTarget.value)" > <option value="">All domain</option> <option v-for="item in items" :key="item.value" :value="item.value" :selected="item.isRefined" > {{ item.label }} </option> </select> </ais-menu-select> //hits display ... </ais-instant-search>

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Haroenvcommented, Aug 16, 2021

You can change the limit of categories using the “limit” prop, but there will always be a limit, the absolute maximum it can be set to is 1000

1reaction
lohnsonokcommented, Aug 16, 2021

Right! You can implement this using the ais-menu-select widget in the root index, and using a child index for ais-search-box and ais-hits. This way, the query of the child index doesn’t affect the selector which is in the root index.

<template>
  <div class="container">
    <ais-instant-search
      :search-client="searchClient"
      index-name="instant_search"
    >
      <ais-menu-select attribute="categories">
        <template slot="item" slot-scope="{ item }">
          {{ item.label }}
        </template>
      </ais-menu-select>

      <ais-index indexName="instant_search" indexId="instant_search_results">
        <ais-search-box placeholder="Search" />
        <ais-hits>
          <template slot="item" slot-scope="{ item }">
            <article>
              <h1>
                <ais-highlight :hit="item" attribute="name" />
              </h1>
            </article>
          </template>
        </ais-hits>

        <ais-pagination />
      </ais-index>
    </ais-instant-search>
  </div>
</template>

I created this sandbox to see it in action.

Thank a lot. it work like a charm. Now how to show all categories without limit please ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to disable auto refinement for select input in algolia ...
I have this current code for integrated algolia ais-instant-search that working fine and I want to disable auto refinement on select input ...
Read more >
How can I disable the automatic sorting done by ...
However, I would like to disable the feature of a Refinement List element going to the top of the list as soon as...
Read more >
Turn off Automatic Filtering and Boosting with InstantSearch.js
Let users remove applied filters. To remove filters applied with Automatic Filtering and Boosting, you need to turn the feature off for the ......
Read more >
refinementList | InstantSearch.js - Algolia
The refinementList widget is one of the most common widget you can find in a search UI. With this widget, the user can...
Read more >
Stop refinementList sorting hits upon selection - Open Q&A
Hi, Is it possible to select multiple refinementList items and then 'submit' them all at once without the results being filtered as I...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found