wip: renders live search results

assets/controllers.json

@@ -1,5 +1,16 @@
 {
     "controllers": {
+        "@symfony/ux-autocomplete": {
+            "autocomplete": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": true,
+                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
+                    "tom-select/dist/css/tom-select.bootstrap5.css": false
+                }
+            }
+        },
         "@symfony/ux-live-component": {
             "live": {
                 "enabled": true,

assets/controllers/search_bar_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    initialize() {
+        this._onPreConnect = this._onPreConnect.bind(this);
+        this._onConnect = this._onConnect.bind(this);
+    }
+
+    connect() {
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
+        this.element.addEventListener('autocomplete:connect', this._onConnect);
+    }
+
+    disconnect() {
+        // You should always remove listeners when the controller is disconnected to avoid side-effects
+        this.element.removeEventListener('autocomplete:connect', this._onConnect);
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
+    }
+
+    _onPreConnect(event) {
+        // TomSelect has not been initialized - options can be changed
+        console.log(event.detail.options); // Options that will be used to initialize TomSelect
+        event.detail.options.onChange = (value) => {
+            // ...
+        };
+    }
+
+    _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
+    }
+}

assets/styles/app.css

@@ -95,3 +95,30 @@ dialog[data-dialog-target="dialog"][closing] {
         display: inline-table;
     }
 }
+
+#search .ts-wrapper.single .ts-control::after {
+    display: none !important;
+}
+
+#search .ts-control {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #fff !important;
+    padding-left: 0;
+
+    input {
+        color: #fff !important;
+        padding: 0;
+    }
+}
+
+#search .ts-dropdown {
+    background: unset;
+    @apply bg-orange-500/80 backdrop-filter backdrop-blur-md text-white border border-orange-500 rounded-md
+}
+
+#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
+}

composer.json

@@ -44,6 +44,7 @@
         "symfony/security-bundle": "7.3.*",
         "symfony/stimulus-bundle": "^2.24",
         "symfony/twig-bundle": "7.3.*",
+        "symfony/ux-autocomplete": "^2.27",
         "symfony/ux-icons": "^2.24",
         "symfony/ux-live-component": "^2.24",
         "symfony/ux-turbo": "^2.24",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "67e697578f7237f60726c0d93bfed001",
+    "content-hash": "248d1e534ec6bb56594a7380fb2eb860",
     "packages": [
         {
             "name": "1tomany/rich-bundle",
@@ -9071,6 +9071,96 @@
             ],
             "time": "2025-03-30T12:17:06+00:00"
         },
+        {
+            "name": "symfony/ux-autocomplete",
+            "version": "v2.27.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-autocomplete.git",
+                "reference": "ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-autocomplete/zipball/ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06",
+                "reference": "ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/dependency-injection": "^6.3|^7.0",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/http-foundation": "^6.3|^7.0",
+                "symfony/http-kernel": "^6.3|^7.0",
+                "symfony/property-access": "^6.3|^7.0"
+            },
+            "conflict": {
+                "doctrine/orm": "2.9.0 || 2.9.1"
+            },
+            "require-dev": {
+                "doctrine/collections": "^1.6.8|^2.0",
+                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/orm": "^2.9.4|^3.0",
+                "fakerphp/faker": "^1.22",
+                "mtdowling/jmespath.php": "^2.6",
+                "symfony/form": "^6.3|^7.0",
+                "symfony/framework-bundle": "^6.3|^7.0",
+                "symfony/maker-bundle": "^1.40",
+                "symfony/options-resolver": "^6.3|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
+                "symfony/process": "^6.3|^7.0",
+                "symfony/security-bundle": "^6.3|^7.0",
+                "symfony/twig-bundle": "^6.3|^7.0",
+                "symfony/uid": "^6.3|^7.0",
+                "twig/twig": "^2.14.7|^3.0.4",
+                "zenstruck/browser": "^1.1",
+                "zenstruck/foundry": "1.37.*"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/ux",
+                    "name": "symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Autocomplete\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "JavaScript Autocomplete functionality for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-autocomplete/tree/v2.27.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-06-21T10:08:18+00:00"
+        },
         {
             "name": "symfony/ux-icons",
             "version": "v2.26.0",

config/bundles.php

@@ -19,4 +19,5 @@ return [
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
     Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle::class => ['all' => true],
+    Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
 ];

config/routes/ux_autocomplete.yaml

@@ -0,0 +1,3 @@
+ux_autocomplete:
+    resource: '@AutocompleteBundle/config/routes.php'
+    prefix: '/autocomplete'

importmap.php

@@ -47,4 +47,21 @@ return [
         'version' => '4.1.1',
         'type' => 'css',
     ],
+    'tom-select' => [
+        'version' => '2.4.3',
+    ],
+    '@orchidjs/sifter' => [
+        'version' => '1.1.0',
+    ],
+    '@orchidjs/unicode-variants' => [
+        'version' => '1.1.2',
+    ],
+    'tom-select/dist/css/tom-select.default.min.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
+    'tom-select/dist/css/tom-select.default.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
 ];

src/Controller/IndexController.php

@@ -31,9 +31,25 @@ final class IndexController extends AbstractController
     }
 
     #[Route('/test', name: 'app_test')]
-    public function test(MonitorDispatcher $dispatcher): Response
+    public function test(Tmdb $tmdb, Request $request): Response
     {
-        $dispatcher();
+        $results = [];
-        return new Response();
+
+        $term = $request->query->get('query') ?? null;
+
+        if (null !== $term) {
+            $tmdbResults = $tmdb->search($term);
+
+            foreach ($tmdbResults as $tmdbResult) {
+                $results[] = [
+                    'text' => $tmdbResult->title,
+                    'value' => $tmdbResult->title,
+                ];
+            }
+        }
+
+        return $this->json([
+            'results' => $results,
+        ]);
     }
 }

symfony.lock

@@ -281,6 +281,18 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-autocomplete": {
+        "version": "2.27",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.6",
+            "ref": "07d9602b7231ba355f484305d6cea58310c01741"
+        },
+        "files": [
+            "config/routes/ux_autocomplete.yaml"
+        ]
+    },
     "symfony/ux-icons": {
         "version": "2.24",
         "recipe": {

templates/components/Card.html.twig

@@ -1,6 +1,6 @@
 <div{{ attributes }}>
     <div class="flex flex-col bg-sky-950 border-neutral-700 border-t-4 border-t-orange-500 rounded-xl
-     backdrop-filter backdrop-blur-md bg-opacity-40
+     backdrop-filter backdrop-blur-md bg-opacity-40 z-10
 ">
         <div class="p-4 md:p-5">
             <h3 class="mb-4 text-lg font-bold text-white">

templates/components/SearchBar.html.twig

@@ -1,15 +1,18 @@
 <div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
     <div class="relative">
-        <form action="{{ path('app_search') }}">
+        <form id="search" action="{{ path('app_search') }}">
-            <input
+            <select
+                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {url: path('app_test'), create: false, highlight: false}) }}
+                    {{ stimulus_controller('search_bar') }}
                     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
-                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-2 transition
+                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-0 transition
                          duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
-                         shadow-sm focus:shadow"
+                         shadow-sm focus:shadow ts-search z-40"
                     placeholder="TV Show, Movie..."
-            />
+            >
+            </select>
             <button
                     class="absolute top-1 right-1 flex items-center rounded
                     bg-green-600 py-1 px-2.5 border border-transparent text-center
@@ -18,7 +21,7 @@
 
                     text-white bg-green-600 text-sm
                     border border-green-500
-                    backdrop-filter backdrop-blur-md bg-opacity-80
+                    backdrop-filter backdrop-blur-md bg-opacity-80 z-40
 "
                     type="submit"
             >

templates/index/index.html.twig

@@ -4,7 +4,7 @@
 {% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
-    <div class="p-4 flex flex-col grow gap-4 z-30">
+    <div class="p-4 flex flex-col grow gap-4 z-10">
         <div class="flex flex-col md:flex-row gap-4">
             <twig:Card title="Active Downloads" class="w-full">
                 <twig:DownloadList :type="'active'" />