Improve user quicksearch UI (feedback, highlighting, navigation)

[lukasjuhrich]

There are a lot of things that can be improved with the search UI which would allow one to search way more efficiently:

1. Highlighting the search key by making it bold
2. Deemphasizing the User ID
3. Fix margins
4. Provide a “to advanced search” quicklink (but that should not be the first focus
5. Auto-Focus the first result, allowing to reach the quicklink via the up key. If no results are there, possibly add a deemphasized hint, but then auto-focus the quicklink.

Rationale:

1. This provides visual anchors the user will recognize with a very short delay. The existence of these anchors helps make split-second categorizations: For instance, if I want to find the user with the usernamewatcherknight and type kn, other names such as Thomas Knecht or similar may come up. However, since the username has a deterministic position, my brain will automatically filter out the match where this visual anchor (the bold kn portion) is not in the username.
2. In most other contexts, we are used to the name being the most prominent information about a user. Only in the case where we explicitly want to find a user ID do we want to have more visual prominence for the ID – however, that is already given due to the bold highlighting.

The rest should be self-explanatory.

[lukasjuhrich]

Quick mockup to get a feeling:

Content:

<span class="aa-dropdown-menu aa-with-users" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; left: 0px; z-index: 100; right: auto;"><div class="aa-dataset-users">
  <a style="display:block" href="/user/search">To advanced search</a>
  <div class="result">
    <div display="flex">Lukas <strong>Juhr</strong>ich <em class="text-secondary"><small>#12345</small></em></div>
    <div><code>lukas<strong>juhr</strong>ich</code></div>
  </div>
</div></span>

.aa-dropdown-menu > div {
    padding: 0.375rem 0.75rem;
}
.result > :not(:first-child) {
    margin-left: 1em;
}

[lukasjuhrich]

Follow-up to #299

[lukasjuhrich]

A good example could be the BS5 docs. Also, one should take a look at the algolia showcase.

[lukasjuhrich]

Random idea: If one would add e.g. the feature of returning an address, one could add icons in front of the rows to signify the result type. But that's clearly a stretch goal.