Filterlists: don't require clicking search/ok on column filters

[collinbarrett]

In the new antd design, we should not require the user to click "Search"/"Ok" buttons when filtering columns. Since we are not using dynamic paging/filtering (all data is cached in the browser after first page load and filtering is done client-side), the grid filtering should happen automatically on every letter typed or every option selected. We may even be able to remove the "Search"/"Ok" buttons altogether.

For the simple "Search" filtering, the file to update is likely this that was ported from antd's example here.

Inspired by: https://www.reddit.com/r/privacytoolsIO/comments/d9kkbw/why_filterlistscom_made_the_navigation_in_the/

[gwarser]

I have slight usability issue with searching, because I always need to think how to do searches (search icon is not clearly visible) and doing search is actually few step process (clicking few times)

• There should be large global search field on top.
• Clicking on search icon in column header should put focus in search field.

[heydojo]

@collinbarrett it's personal preference but I really don't like antd as a design concept at all. I really like the idea behind filterlists.com and wanted to like it but when the site was down during December 2019, I quickly mashed up an alternative using the json data available here on github.
https://tw3.gitlab.io/tw3filterlists/

My concern was that filterlists.com was not coming back up. I also found the search a bit jarring and at that particular time I was wanting to filter through the ABP filters to test some of them in a browser.

If you try the search on the site I linked, I think it demonstrates what you mean by not clicking on an OK or Search button. It does however, only filter by name. It degrades gracefully by not showing the search box when a browser has js disabled. The other thing to mention is that there is a reset button which resets the search results once they have been filtered. It saves refreshing the page if you have a lot of different search queries to make.
The code for the search box is here: https://gitlab.com/TW3/tw3filterlists/blob/master/web/content/_includes/sidebar.blade.php it is just some html and js.

The site is supposed to be simple. It is merely a proof of concept which I knocked up to solve a problem. It's also a useful demo for my portfolio. It's not at all competition for filterlists.com, does not currently update itself on any schedule and any updates to it are going to be very light and few between.

Feel free to repurpose the search box code and use it on filterlists.com, if you think it may it may be at all useful to you.

[collinbarrett]

@heydojo Hey, that's awesome. Everything that's a part of FilterLists is under MIT and totally welcome to be re-purposed, etc. Glad you were able to spin up a UI that is more useful for you.

I agree. The search functionality definitely needs to be improved on the current UI. That was a big loss from the old design that I should have ensured was working before launching the new version. I'll tackle when I can. But, just haven't had time as of late. PRs welcome if anybody is able to help.

Thanks!

[collinbarrett]

as the title of this issue stands currently ("don't require clicking search/ok on column filters"), this feature now seems to work. if you click the magnifying glass on the "Name" column, type in a search query, then press "Enter" on your keyboard, the search fires. I think it must have been an antd Table feature added at some point.

while I agree that some sort of search all feature could be useful rather than the column-level filters, it's not something I can personally tackle any time soon unless we re-do the entire UI. I think the column-level filters provide enough usability for now.

But, PRs and additional feedback are always welcome.