Add keyword search to filter example queries

[IoannisNezis]

This PR adds a keyword-search to filter the example querys (by name).

before	after

Each whitespace sperated word needs to appear in the result.

The search matches the keyword also infix

When no result matches the query, a message is displayed.

[IoannisNezis]

Maybe debouncing the search would be nice

[IoannisNezis]

I played around a bit with different highlighting options:

background	underline

I personally prefer the underline option, any opinions?

[hannahbast]

@IoannisNezis This is awesome! It's live on https://qlever.cs.uni-freiburg.de for some time now and I use it for almost every example query. The underlining looks great. A minor suggestion for further improvement: When one clicks on the Example button, the focus should be in the search field so that one can start typing right away without first clicking into the search field

[hannahbast]

Looks great, a few minor suggestions. Using match(regex) for the search is not a must, but maybe you like it.

[hannahbast]

A minor comment: Our comment style is normal sentences (capitalized and with a full stop). I know that a lot of the qlever-ui does not follow this rule yet. That's becase it's old. But nor reason not to stick to this for all new code.

[IoannisNezis]

Ah, good to know!
I generated some docstrings with chatGPT.
Do the new comments satisfy the comment style?

/**
 * Removes highlighting from the input string by replacing all occurrences of
 * <span> elements with the class "keyword-search-highlight" with their inner content.
 *
 * @param {string} input_str - The input string possibly containing highlighted spans.
 * @returns {string} - The input string with highlighting removed.
 */

[hannahbast]

We use ordinary // ... comments with full sentences. When referring to variable or class names in a comment, we put it in .... See the code on https://github.com/ad-freiburg/qlever for many examples of this (it's also not 100% consistent there, but 90% of the comments follow this convention).

[hannahbast]

@IoannisNezis This looks great now.

Another small request, which occurred to me already when trying this out the first time and still occurs to me now every time I used the new feature:

When selecting a query using the "Example" button one has to:

1. Press the Example button
2. Start typing some word fragments (thanks to your latest change, a click in the search field is no longer necessary)
3. Click on the desired query
4. Execute the query

For Step 4, there is the Shortut Ctrl+Return, which I always use to execute a query (after you type the query, you can just continue typing in instead of having to switch to the mouse again just for a single click).

But with the workflow above, I have to click, type, click, click

It would be awesome if one could select the query with either TAB or arrow-up / arrow down and then select it via Return (and another Ctrl+Return would then execute it). Interestingly, when pressing TAB once, one already gets to "Add new example", and then Return takes you to the corresponding page. So maybe realizing this with TAB is relatively little additional work.

[IoannisNezis]

@hannahbast
I actually already started working on this, initially this is a bit of a pain.
I did not look into the tabindex direction yet, thanks for the idea.

At this point it might be worth mentioning that i am re-implementing parts of this library: https://select2.org/ which i initially choose not to use.

If there is a good reason not to use this library i would be really happy (sunken cost fallacy is kicking in really badly).
One reason might be: being able to search for multiple keywords of one example.

[IoannisNezis]

I implemented the keyboard control.
It should now be possible to search, select and execute an example query while only clicking once.

I decided against the tabulator option and implemented the selection with arrow keys.

Further improvements

I want to implement 2 further improvements:

Scroll

The list of possible examples is a bit long.
i want to make the list scrollable, instead of showing everything.

Exclusive Hover

Currently one can select a example with the mouse and the arrow keys.
I want to change this so that if one hovers an example only this example is highlighted.
If the arrow key is used after a element is hovered with the mouse it should propagate from this element.

[hannahbast]

1-1 with Ioannis, this looks great, just some minor changes

[IoannisNezis]

@hannahbast
In the last 2 commits I implemented the formatting changes we discussed (typo, line-length, ...).

A few things:

1. What is the procedure for closing threads in PR's?
   Should only the reviewer close them or can the assignee also close threads if its reasonable?

2. In a previous comment i suggested two further improvements.
   I would like to address them in separate PR's to keep this one at a manageable size.

[hannahbast]

Finally finishing this review and merging this. Thanks for the extremely useful addition, Ioannis!