Implement autocomplete for search

[joelit]

Link to relevant issue(s), if any

Autocomplete functionality for #1514

Description of the changes in this PR

This PR introduces a Bootstrap 5 dropdown menu for autocomplete, and it aims to fulfill the basic functionality of the search bar's autocomplete part.

• 1.1 Dropdown menu should be styled with Bootsrap
• 1.4 Input element should be rectangular
• 1.5 Once user has stopped typing aftes X ms, submit the search
  • 1.5.1 Process the search results into autoCompeteResults
• 1.6 Append an asterix after the search term
• 1.7 When the result list is calculated, display the dropdown
  • 1.7.1 If there are no results, display a dropdown with no results -message
  • 1.7.2 If the user writes more text in addition to previously given input, show the result of the latest input
• 1.8 Hide the dropdown list, if the user
  • 1.8.1 Clears the text box from the clear-button
  • 1.8.2 Deletes the contentents of the input field
  • 1.8.3 Clicks on somewhere outside of the search result dropdown
• 3.7 Autocomplete should fire if there is at least two characters in the input string

Known problems or uncertainties in this PR

• Bootstrap 5 dropdown menu is designed to fire on click. If and when this is not desired, the showing and hiding has to be triggered in JS, which is rather odd

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.58%. Comparing base (f22c504) to head (ddf2603).
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #1589   +/-   ##
=========================================
  Coverage     70.58%   70.58%           
  Complexity     1647     1647           
=========================================
  Files            32       32           
  Lines          4321     4321           
=========================================
  Hits           3050     3050           
  Misses         1271     1271           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[joelit]

This is a bit heavy handed to I disable the bootstap-determined onClick listener from the text box like so.

[joelit]

Changed the way special characters are handled for the search itself, and how the matching part of the search results are displayed. Also changed URL parameters into URLSearchParams objects, and adjusted cypress tests to reflect these changes. 👍

[UnniKohonen]

Added some minor suggestions for CSS.

In the Vue component, I would change the way the visibility of the dropdown list is handled. Instead of removing and adding the list's class directly, I would use a variable and bind the class in the template. It works the way it's done now, but IMO it would be a little cleaner to use Vue's own functionality.

The event listener for clicking outside the component could be done using a custom directive like in the other Vue components, but this isn't probably necessary as it seems to work fine now.

Otherwise the code looks good and the component seems to work as intended.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud