How to create a searchbar like in GitLab?

Hi all,

today I was asked how much effort it would take to implement a search like in GitLab.


Could someone give me an estimate if it is realistic to rebuild something similar with the existing Vaadin components?

I would also like to take this opportunity to ask if the Vaadin team could develop such a component. Searching for something is a very common use case in business applications.

Kind regards
Stefan

Depends on your knowledge about the platform and tooling on hand. Anything between 16h to 80h could be feasible.

Vaadin is happy to help you with creating custom components open sourced or closed source - you should take that to your Vaadin Rep or contact them directly

This EntityExplorer that @Matti did is one of the things that can be achieved, clearly what you want, about estimated hours, I could not tell you …

It looks like it would be an exercise where you can use Popover as one of the building blocks alongside TextField, Buttons and icons.

I thought about that aswell, but how could I get the position of the cursor in the search/textfield?

Using the focus() method of the Textfield ?

With VTextField from Viritin you can get the cursor position (as in characters aka Selection API), but it don’t help unless you are fine with monospaced font. I guess you meant pixel coordinates, but even with those, AFAIK, Popover can only be positioned relative to other components/elements.

Some “contentEditable” level browser magic might be needed for this one to make the UX really good :thinking:

Are you planning to make your suggestions configurable from Java API? Just wondering in my head what would the optimal custom component look like and how generic it could be…

1 Like

I dont care how suggestions are configured. Java API would be nice.

Do you think such a component would make sense to add to the pool of components.
Now that I am more aware of this kind of search I wonder why it is not already in the pool/paied components since searching something is so common.

Could I not create the grey elements as buttons and somehow get their size?


Even searching for the text “Test” is changed into something “button-like”.

Hi Stefan, I missed answers last week. Adding those as buttons (or as a composition of that text and remove button) would probably work to some extent and might be “good enough” solutions.

If you’d want it to be possible to “paint” multiple existing search terms and deleting or copying those, then it probably gets complicated.