Filters only and hide the search bar + search button

[dudu]

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 Marcinko]

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:
[html]
.proinput, .prosettings, .proloading, .proclose {
display: none !important;
}

.asp_m {
max-width: 95px !important;
min-width: 0 !important;
}
[/html]

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.

[dudu]

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 Marcinko]

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.

[Author]

Posts