fix: allows normal search alongside autocomplete

assets/controllers/search_bar_controller.js

@@ -7,6 +7,11 @@ export default class extends Controller {
     }
 
     connect() {
+        document.querySelector("#search").onsubmit = (event) => {
+            event.preventDefault();
+            const autocompleteController = this.application.getControllerForElementAndIdentifier(this.element, 'symfony--ux-autocomplete--autocomplete')
+            window.location.href = `/search?term=${autocompleteController.tomSelect.lastValue}`
+        }
         this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
         this.element.addEventListener('autocomplete:connect', this._onConnect);
     }
@@ -19,17 +24,36 @@ export default class extends Controller {
 
     _onPreConnect(event) {
         // TomSelect has not been initialized - options can be changed
-        console.log(event.detail.options); // Options that will be used to initialize TomSelect
+        // console.log(event.detail); // Options that will be used to initialize TomSelect
         event.detail.options.onItemAdd = (value, $item) => {
-            console.log(value, $item)
             const params = value.split('|')
             window.location.href = `/result/${params[0]}/${params[1]}`
         };
+        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">
+                <svg viewBox="0 0 24 24" fill="currentColor" height="20" width="20" data-loading-icon-target="icon" class="text-end" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"></animateTransform></path></svg>
+            </span>
+`;
+        }
+        event.detail.options.render.option = (data, escape) => {
+            if (data.data.description.length > 60) {
+                data.data.description = data.data.description.substring(0, 107) + "...";
+            }
+            return `<div class="flex flex-row">
+                        <img src="${data.data.poster}" class="w-16 rounded-md">
+                        <div class="p-2 flex flex-col">
+                            <h2>${data.data.title}</h2>
+                            <p class="max-w-[60ch] text-wrap">${data.data.description}</p>
+                        </div>
+                    </div>
+`
+        }
     }
 
     _onConnect(event) {
         // TomSelect has just been initialized and you can access details from the event
-        console.log(event.detail.tomSelect); // TomSelect instance
-        console.log(event.detail.options); // Options used to initialize TomSelect
+        // console.log(event.detail.tomSelect); // TomSelect instance
+        // console.log(event.detail.options); // Options used to initialize TomSelect
     }
 }

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
 }

config/routes.yaml

@@ -37,3 +37,11 @@ controllersTorrentio:
     type: attribute
     defaults:
         schemes: ['https']
+
+controllersTmdb:
+    resource:
+        path: ../src/Tmdb/Framework/Controller
+        namespace: App\Tmdb\Framework\Controller
+    type: attribute
+    defaults:
+        schemes: ['https']

src/Controller/IndexController.php

@@ -30,28 +30,4 @@ final class IndexController extends AbstractController
             'popular_tvshows' => $this->tmdb->popularTvShows(1, 6),
         ]);
     }
-
-    #[Route('/test', name: 'app_test')]
-    public function test(Tmdb $tmdb, Request $request): Response
-    {
-        $results = [];
-
-        $term = $request->query->get('query') ?? null;
-
-        if (null !== $term) {
-            $tmdbResults = $tmdb->search($term);
-
-            foreach ($tmdbResults as $tmdbResult) {
-                /** @var TmdbResult $tmdbResult */
-                $results[] = [
-                    'text' => $tmdbResult->title,
-                    'value' => "$tmdbResult->mediaType|$tmdbResult->imdbId",
-                ];
-            }
-        }
-
-        return $this->json([
-            'results' => $results,
-        ]);
-    }
 }

src/Tmdb/Framework/Controller/ApiController.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Tmdb\Framework\Controller;
+
+use App\Tmdb\Tmdb;
+use App\Tmdb\TmdbResult;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class ApiController extends AbstractController
+{
+    #[Route('/api/tmdb/ajax-search', name: 'api_tmdb_ajax_search', methods: ['GET'])]
+    public function test(Tmdb $tmdb, Request $request): Response
+    {
+        $results = [];
+
+        $term = $request->query->get('query') ?? null;
+
+        if (null !== $term) {
+            $tmdbResults = $tmdb->search($term);
+
+            foreach ($tmdbResults as $tmdbResult) {
+                /** @var TmdbResult $tmdbResult */
+                $results[] = [
+                    'data' => $tmdbResult,
+                    'text' => $tmdbResult->title,
+                    'value' => "$tmdbResult->mediaType|$tmdbResult->imdbId",
+                ];
+            }
+        }
+
+        return $this->json([
+            'results' => $results,
+        ]);
+    }
+}

tailwind.config.js

@@ -5,6 +5,11 @@ module.exports = {
     "./templates/**/*.html.twig",
   ],
   safelist: [
+      "flex",
+      "flex-col",
+      "flex-row",
+      "p-2",
+      "p-4",
       "bg-blue-300",
       "bg-orange-300",
       "bg-fuchsia-300",
@@ -22,7 +27,12 @@ module.exports = {
       "ease-in",
       "duration-700",
       "opacity-100",
-      "table-row"
+      "table-row",
+      "max-w-[60ch]",
+      "truncate",
+      "text-wrap",
+      "rounded-sm",
+      "rounded-md"
   ],
   theme: {
       extend: {

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('app_test'), 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