search

sickdyd / react-search-autocomplete

A search box that filters the provided array of objects
https://sickdyd.github.io/react-search-autocomplete
MIT License
220 stars 84 forks source link

Handler for empty search #17

Closed aknegtel closed 3 years ago

aknegtel commented 3 years ago

Hello,

I'm loving the component, but am facing a problem. When I clear the search input, ergo have an empty string, the search callback doesn't trigger, so I can't seem to clear the search.

Is there perhaps any callback when the search clears that I'm missing?

Thanks

aknegtel commented 3 years ago

There also doesn't seem to be a way to access the value of the search input, to change it programatically. For example, I have a clear all filters that would need to clear the input, but I can't.

sickdyd commented 3 years ago

@aknegtel I'm looking into it right now. Will post here as soon as I added the features!

sickdyd commented 3 years ago

Hello @aknegtel!

I added the feature you need in the version 5.2.2. Checkout this sandbox for an example: https://codesandbox.io/s/distracted-fermat-zo6r8?file=/src/App.js

Let me know if this solves your issue.

aknegtel commented 3 years ago

Hi @sickdyd!

That was fast! It certainly solves the issue of the clearing with the clear button and the programmatic clearing, thanks!

The thing that still doesn't work like I expected is that if you write something and then gradually erase the onSearch gets called every time but the last one.

I added an image with the example, if you type Java and then erase it until you have an empty string, the search with the empty string doesn't get called so in the filter although you have an empty string, you still have the results of the J of the filter with the J input.

example

It becomes a problem in my case when there are items in the dom that depend on the searchbox input. To put you in context, I have 47 items that are filtered based on the search box, and if I write something then they are filtered real-time, but when I erase the input string to have an empty string they are still filtered based on the last letter.

Maybe it's a problem in my approach but I expected it to work like that.

Thank you for the quick changes nevertheless!

aknegtel commented 3 years ago

I solved the behaviour in my site by setting fuseOptions={{ minMatchCharLength: 2, }} and adding some logic to my filter so it returns every item when only one letter is in the input.