ShowMore functionality for react-instantsearch custom RefinementList widget

Hi,

I have created a custom RefinementList widget using RefinementList | React InstantSearch | API parameters | API Reference | Algolia Documentation and it is working fine except the showMore functionality. I am not sure on what condition I should s

Below is my working widget code

const RefinementListDropdown = ({
    items,
    isFromSearch,
    refine,
    searchForItems,
    currentRefinement,
    ...rest
}) => {
    console.log('rest >> ', rest);
    return <Dropdown.Menu>
        {
            <Input
                type="search"
                placeholder="Find a game"
                onChange={event => searchForItems(event.currentTarget.value)}
            />
        }
        {items.map(item => (
            <FacetItem
                key={item.label}
                handleInputOnChange={() => refine(item.value)}
                item={item}
                isChecked={item.isRefined}
            />
        ))}
    </Dropdown.Menu>
}

const CustomRefinementListDropdown = connectRefinementList(RefinementListDropdown);

const SearchableDropdown = ({ title, attribute }) => {
    return <div className="facet-list">
        <Dropdown className="mb-0 mr-md-3">
            <Dropdown.Toggle
                id="dropdown-search"
                className={
                    classNames(
                        'bg-white', 'text-capitalize', 'rounded-0', 'border-0',
                        'd-flex', 'justify-content-between', 'align-items-center',
                        'text-dark',
                    )
                }
            >
            {title}
            </Dropdown.Toggle>

            <CustomRefinementListDropdown
                attribute={attribute}
                searchable={true}
                limit={2}
                showMore={true}
                showMoreLimit={4}
                translations={{
                    showMore(expanded) {
                        return expanded ? 'Show less' : 'Show more';
                    },
                    noResults: 'No results',
                    submitTitle: 'Submit your search query.',
                    resetTitle: 'Clear your search query.',
                    placeholder: 'Search here...',
                }}
            />
        </Dropdown>
    </div>
}

export default SearchableDropdown;

And use the component like below
<SearchableDropdown attribute="games" title="Games" />

Best,
Ammar

I am trying to update my post but getting HTTP 403. For some reason my post is missing my questions

Here are my questions:

1.I am not sure on how should I implement showMore? When I typeahead in the input the results returned from algolia have no information which can help to implement showMore.
2. As you see limit is set to 1 but when we open the the dropdown it shows 4 options which is strange, I am not sure why this is happening?

Hi there Ammar,

When using the connectRefinementList connector, it’s up to you to implement the show more logic. The connector will pass you down the related props (limit, showMore, showMoreLimit), and with that info you can build your own UI:

  • the connector will return you showMoreLimit items
  • If showMore is true, you should display a button to toggle between display limit items and showMoreLimit items by using items.slice(...) for example.

You can take inspiration from how the default widget is implemented here react-instantsearch/List.js at 8458c22c59ed6c8da401c38487eba0a73f8ddeb3 · algolia/react-instantsearch · GitHub

In it’s simplest form it could look something like:

(sorry I went with a screenshot, I was getting a 403 too because I’m guessing discourse is being overzealous and flags code as potential malicious content :slight_smile: )

I hope this helps!

@vincent.lemeunier Thanks a lot. Now I realized that I need something different. Let me explain

In the refinementlist search box, when user types, results will be filtered and fetched from Algolia. So lets say there are 200 or n matches for the current input in search box. Will algolia return all the matched results which I think it will not? So if all the matched results will be not be returned from Algolia then what is best way to fetch results in batches as the user scroll down? Can Algolia returns something that tells, for you current query, there are n matches but according to some limite we can give you n - 20 results and to fetch remaining results, you need to do this?

Any help would be highly appreciated.

Hi @mammar,

With your custom <RefinementList /> component, you can pass a limit props which will be used to cap the number of facet values retrieved. By default, this number is set to 10 but it can go up to 1,000 (maxValuesPerFacet | API parameters | API Reference | Algolia Documentation).

Later, you can use @vincent.lemeunier’s answer to build a “Show more” feature, either based on a button or a scroll.

Hope this will help you!