Marking search fields

You are reading about requirements for the integration done by the Luigi's Box team. You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi's Box frontend libraries.

When integrating autocomplete and search, we need to hook into your existing searchboxes. We will identify all of your searchboxes (there may be several of them, e.g. on desktop and on mobile) by their CSS classes.

If at any point in the future you change the CSS classes for the searchbox, the integration will break, as Luigi's Box will no longer be able to find the searchboxes and autocomplete and search will stop working. We will usually be able to provide a fix and update the selectors very easilly, but the downtime of autocomplete and search may impact your business in a negative way.

To avoid unexpected breakage, you can mark the searchboxes with a CSS class dedicated to Luigi's Box. See the examples below.

The example below shows how the HTML code for a searchbox typically looks like.

<input name="q" class="searchbox" placeholder="Search.."></input>

To avoid unexpected breakage, you can add the lbx-searchbox CSS class and change the HTML code to:

<input name="q" class="searchbox lbx-searchbox" placeholder="Search.."></input>

This way it will be more obvious to your developers that the searchbox has special purpose for Luigi's Box and as long as they keep this class, they can add or remove style-related CSS classes.