fix: better styles for active option

assets/controllers/search_bar_controller.js

@@ -24,6 +24,9 @@ export default class extends Controller {
             const params = value.split('|')
             window.location.href = `/result/${params[0]}/${params[1]}`
         };
+        event.detail.options.onType = (searchQuery) => {
+            console.log(this.element);
+        }
         event.detail.options.render.loading = (data, escape) => {
             return `
             <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">

assets/styles/app.css

@@ -120,5 +120,5 @@ dialog[data-dialog-target="dialog"][closing] {
 
 #search .ts-dropdown .ts-dropdown-content .option.active {
     background: unset;
-    @apply hover:bg-orange-500/80 active:bg-orange-500/80 text-black rounded-md
+    @apply bg-orange-500/80 text-black font-bold rounded-md
 }

templates/components/SearchBar.html.twig

@@ -2,7 +2,14 @@
     <div class="relative">
         <form id="search" action="{{ path('app_search') }}">
             <select
-                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {url: path('api_tmdb_ajax_search'), create: false, highlight: false}) }}
+                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
+                        url: path('api_tmdb_ajax_search'),
+                        create: false,
+                        tomSelectOptions: {
+                            highlight: false,
+                        }
+                    }) }}
+                    id="term"
                     name="term"
                     class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
                          backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50