Modifying the Search UI Layout

[spadel]

I have built a search engine that looks like follows:

As you can see, it is about some employee feedback and contains a similarity search algorithm (I had to modify the source code and connect it to my own API for that purpose).

Now I need another input box, where I can type in an integer number. This input box should be small and right above the large query search box. Is there an easy way, to modify the layout, considering the Search UI is built on React?

Thank you for your help!

[constancecchen (Constance Chen)]

Hi Spadel,

Yes, you can definitely customize many parts of Search UI. Check out the customization guide here:

elastic/search-ui/blob/master/ADVANCED.md#customization

You probably want to look at the "Component Views and HTML" section, particularly looking at the SearchBox component. You'll essentially be passing in a custom view with your own smaller input and then the larger query search box (which you can either copy the markup for or customize as needed).