Adding "Magnifying Glass" and "Search By Algolia"

Hello everyone,

I’m new to the community and i just started learning how algolia works yesterday. I’m a junior React js developer and i was trying to play around with algolia’s autocomplete search. I first started by trying to understand how the instant search works, SearchBow etc… But later when i successfully did the Autocomplete, i couldn’t have the magnifying glass by default like on the searchbox. Also i wanted to know how to add the “search by algolia link” like on most websites that use algolia’s search.

Thank you very much

Hi @Ulrich96,

Welcome to the community!

To add the “Search by Algolia” link, you can simply add the PoweredBy widget

Indeed, you are right, on the SearchBox, by default, you get the magnifying glasses as a submit button. With this widget, you can choose to enable searchAsYouType or disable it, if you disable it then clicking on these magnifying glasses will be the way to submit your search!

Having a submit button on an autocomplete menu makes less sens as the suggestions evolve with the user’s input, but you can still customize the input UI and add magnifying glasses as an image in there by using the connector: https://www.algolia.com/doc/api-reference/widgets/autocomplete/react/#connector.

I hope this helps!

Hi @marie.gillier

Thank you very much!

1 Like