Non-limited search for MultiList with size

[rap2hpoutre]

Issue Type:
Enhancement issue (or maybe just something I don't understand)

Platform:
ReactiveSearch for Web

Description:
Currently, the MultiList component displays a limited list that is useful for filtering. It's limited by size. There is also a "search" subcomponent associated to this component that can help to search inside the MultiList list if showSearch is true.

My problem is that it can only search into the limited list, not the whole list. So if I use the Multilist to filter the results of a DataSearch, I cannot search inside the MultiList for words that are not displayed. So if I want to search for a word that is not in the first 100 results of the MultiList, it is not returned.

Is there a way to search in the whole database when searching inside a MultiList rather than searching in the first 100 results?

Example MultiList component (no really useful example IMO)

<MultiList
                    componentId="base"
                    dataField="BASE.keyword"
                    title="Domaine"
                    queryFormat="and"
                    filterLabel="Domaine "
                    className="filters"
                    showSearch={true}
                    showCheckbox={true}
                    URLParams={true}
                    placeholder="Rechercher"
                    react={{
                      and: FILTER
                    }}
                  />

Reactivesearch version: latest

Browser: all

[siddharthlatest]

@rap2hpoutre The max size for a MultiList can be set to 1000 right now. We have an open issue where we working on adding pagination support to a List component (via Show More).

[rap2hpoutre]

@siddharthlatest OK thank you!

The max size for a MultiList can be set to 1000 right now

Uh, it's actually not an option for us because it will be slow (we have 5 Multilists on the same page).

We have an open issue where we working on adding pagination support to a List component (via Show More).

Great news! Does it means that it will "lazy-load" the list on search/page-change (good) or load everything (not good for us)?

[siddharthlatest]

Great news! Does it means that it will "lazy-load" the list on search/page-change (good) or load everything (not good for us)?

It will lazy-load.

My problem is that it can only search into the limited list, not the whole list.

I am not sure how (at least right now) we can address the issue you originally raised above. Any thoughts, @metagrover?

[metagrover]

I do see value in it. In cases of large datasets, local search filtering won't be a great UX. Ideally, the search should happen on the ES in such cases and maybe we can keep it as an optional behavior via some boolean prop.

In order to implement this, we can run the aggs query with search match + match_phrase query similar to that of datasearch? This won't be a trivial implementation though.

[siddharthlatest]

Sounds good. We can get the lazy loading feature out first and then support DB search (as an alternative to local search) at a later point in time.

[metagrover]

Primary implementation released in v2.10.0 🎉

Refer docs: showLoadMore prop.

[rap2hpoutre]

Wah! 😍 I did not expected something to be done so quickly! Thank you for your work!

(side question since I'm building a french project: is there a way to customize the label displayed, just like missingLabel, filterLabel and so on? I could try to implement it and send a PR if you want)

[metagrover]

Yeah, it should be trivial. We can introduce a prop called loadMore which can be a string or a valid JSX and can be rendered here when set.

Open to accepting PRs on this. 🐱

---

Note that we use composite aggs to do lazy loading here which requires Elasticearch >= 6.

[rap2hpoutre]

Note that we use composite aggs to do lazy loading here which requires Elasticearch >= 6.

It's OK!

Yeah, it should be trivial

I opened a PR: #542 feel free to comment/criticize!

[nithinkashyapn]

Hey,

Thanks for the load more feature.

Can anyone tell me as to how the DB search feature will work or as to how to implement it?