Prevent Search Bar Button from Triggering My Filters

Design help General
1

Hi,

I’ve created a filter and search bar using Finsweet Attributes to search and filter my CMS collection. However, I’ve run into a problem. When clicking on any of my filter buttons, nothing happens, and I need to click on “Search” for the filter to be triggered. How can I decouple my search button from my filter buttons? I want to be able to click on a filter button and for the items to pop up directly.

Anyone who knows if this can be fixed?

Thanks in advance.

Here is my site Read-Only: Webflow - Quotes by Women

2

Hide the search button.

image
image1281×740 54 KB

3

Thank you, I know that works! However, I was looking for an alternative where it’s possible to still have a search button that is connected to the search bar, but disconnected from the filters :)

4

I’m not sure what UX you’re trying to create?
The search button wouldn’t do anything… in auto filter mode the items are filtered as you’re typing.

You could put a non-functioning one, but I think I’d just find that confusing.

5

Sorry if I’m expressing myself unclear. The UX experience I’m after is to not have an auto filter mode. I’d like to trigger the search by clicking on the button, not when a user starts typing in the search bar.

6

Hi Anna,

The “click Search button to filter” behavior you’re describing here exactly matches the setup you already have in your original post-

I think the confusion is that you’re imagining a split on the filter so that clicking category buttons filters immediately but typing in the text input does NOT filter immediately.

That’s not how FS filter works. You can configure filtering to be immediate by hiding the Search button but that applies to all filter fields including text inputs.

In my last post my point was that when you’re in “immediate filter” mode, you could put a dummy button next to the search field but it wouldn’t do anything- because the moment someone types text into the search field the filter happens automatically.

I suspect you may not have noticed that filtering is happening instantly as-you-type?

If a client demanded this dual behavior ( sometimes clients want to mimic a competitor site or something ), I’d build it with a proxy field like this;

DIV - wrapper 
  FORM - filter 
    DIV - proxy search 
      INPUT - search field the user uses ** no FS attributes
      BUTTON - search 
    DIV - hidden *
      INPUT - actual search field, FS attributes here 
    DIV - visible
      ... category buttons --
    SUBMIT - hidden * for immediate-search

You’d setup the FS search for immediate search field, then;

  • Hide the input
  • Create a second input which has no FS attributes, which the user sees
  • Have a special button ( not a submit )
  • Custom code that detects the button click, copies your proxy search text over to the hidden FS search input, and then triggers the search
7

Ah sorry, I didn’t explain what I was looking for properly. I have noticed that filtering is happening instantly when I type if I remove my button. What I was looking for is this dual behavior - having a search bar which is triggered by a button and not by immediate typing - so I’ll try your suggested structure. Thank you!

1 Like