Filters only and hide the search bar + search button

[duduParticipant]

Hi guys,

On my main search page I use a search instance with several filters only and the search bar is hidden.

This however triggers the search whenever any of the filter fields is filled-in with some data by the user.

I would like to have a search button and initiate the search only when I am done completing the data into the search filter fileds. So no automatic search happens until the user hits the search button.

Is there a way to do that?

Thank you very much.

Best regards
Boris

[Ernest MarcinkoKeymaster]

Hi Boris,

There might be a sort-of a hacky way to do that. I’m not sure if it will work, but it’s worth a shot.

So, first off, you will have to re-enable the search bar, it will be used as the search button, by reducing it’s width and hiding the input.
– To enable the search: https://i.imgur.com/L3Es1JU.png
– Then enable the magnifier icon, and the search text as well: https://i.imgur.com/V21J8cu.png
– Then change the search button action to trigger live search, as well as disable live search on filter changes: https://i.imgur.com/e1wwuod.png
– Then use add this custom CSS:

.proinput, .prosettings, .proloading, .proclose {
    display: none !important;
}

.asp_m {
    max-width: 95px !important;
    min-width: 0 !important;
}

The max-width may have to be adjusted, 95px worked in my case.

For me this resulted in this layout: https://i.imgur.com/ZAnoC8J.png
It sort-of mimics a search button, not the best solution, but the only way to resolve this without additional coding.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[duduParticipant]

Hi Ernest,

I am coming back to our discussion above.
I implemented your suggested steps and it works fine. Thanks a lot.
What I am missing though is that when the user hits “search” there is no indicator showing the search is processing… so the results come 5 or more seconds later and by then the user does not know if she/he has even submitted the query.

Can you please suggest a way to display some sort of “search is progress” indicator (either visual or at least textual) until the search results populate, with this limited filters-only setup?

Thank you very much.

Best regards,
Boris

[Ernest MarcinkoKeymaster]

Hi Boris,

Well, it should, but I guess the modification might mess with that as well. There is solution to that I believe.

1. Make sure that the loading color is not the same as the background color, otherwise it is not visible: https://i.imgur.com/UWblXUB.png
2. You can also enable the loading indicator to display in the results box as well: https://i.imgur.com/ghKa6UG.png

These should hopefully help.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts