Bugfix

src/Resources/contao/templates/frontend_module/mod_meilisearch_search.html.twig

@@ -4,28 +4,57 @@ Contao 5 – Frontend Module Template
 #}
 <!-- indexer::stop -->
 <div
+        id="topsearch"
         class="meilisearch-search"
         data-limit="{{ meiliLimit }}"
 >
-    <div class="meilisearch-search-field">
+    <div class="headersearch">
-        <input
+        <form id="search-form" onsubmit="return false;">
-                type="search"
+            <div class="formbody">
-                id="meilisearch-input"
+                <div class="widget widget-text">
-                placeholder="Suche …"
+                    <label for="search_input" class="invisible">
-                autocomplete="off"
+                        {{ 'Suchen'|trans }}
-        >
+                    </label>
 
-        <button
+                    <div class="search-field">
-                type="button"
+                        <input
-                class="meilisearch-clear"
+                                type="search"
-                aria-label="Suche löschen"
+                                name="keywords"
-                hidden
+                                id="search_input"
-        >
+                                class="text"
-            ×
+                                placeholder="Suchbegriff eingeben..."
-        </button>
+                                autocomplete="off"
+                        >
+
+                        <button
+                                type="button"
+                                class="meilisearch-clear"
+                                aria-label="Suche löschen"
+                                hidden
+                        >
+                            ×
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+
+        <div id="search-results"></div>
+
+        <template id="search-result-template">
+            <div class="search-item">
+                <div class="siteimage"></div>
+
+                <div class="teaser">
+                    <div class="title"></div>
+                    <div class="extract"></div>
+                    <div class="pfad"></div>
+                </div>
+
+                <a class="masterurl" href="#" title=""></a>
+            </div>
+        </template>
     </div>
-
-    <div id="meilisearch-results" class="meilisearch-results"></div>
 </div>
 <!-- indexer::continue -->
 <script type="module">
@@ -38,9 +67,15 @@ Contao 5 – Frontend Module Template
             return;
         }
 
-        const input   = wrapper.querySelector('#meilisearch-input');
+        const input   = wrapper.querySelector('#search_input');
         const clear   = wrapper.querySelector('.meilisearch-clear');
-        const results = wrapper.querySelector('#meilisearch-results');
+        const results = wrapper.querySelector('#search-results');
+        const template = wrapper.querySelector('#search-result-template');
+
+        if (!input || !results || !template) {
+            console.warn('[Meilisearch] Required elements not found');
+            return;
+        }
 
         const limit = parseInt(wrapper.dataset.limit, 10) || 50;
 
@@ -53,6 +88,9 @@ Contao 5 – Frontend Module Template
 
         let abortController = null;
 
+        // ----------------------------
+        // Clear button
+        // ----------------------------
         clear.addEventListener('click', () => {
             input.value = '';
             results.innerHTML = '';
@@ -60,6 +98,9 @@ Contao 5 – Frontend Module Template
             input.focus();
         });
 
+        // ----------------------------
+        // Input handling
+        // ----------------------------
         input.addEventListener('input', async () => {
 
             const query = input.value.trim();
@@ -97,49 +138,59 @@ Contao 5 – Frontend Module Template
 
             } catch (e) {
                 if (e.name !== 'AbortError') {
-                    console.error('Meilisearch error:', e);
+                    console.error('[Meilisearch]', e);
                 }
             }
         });
 
+        // ----------------------------
+        // Render results via <template>
+        // ----------------------------
         function renderResults(hits) {
 
             results.innerHTML = '';
 
-            if (!hits.length) {
+            if (!hits || !hits.length) {
                 return;
             }
 
             for (const hit of hits) {
 
-                const article = document.createElement('article');
+                const node = template.content.cloneNode(true);
-                article.className = 'meilisearch-result type-' + (hit.type || 'default');
 
-                const link = document.createElement('a');
+                const image   = node.querySelector('.siteimage');
-                link.href = hit.url || '#';
+                const title   = node.querySelector('.title');
-                link.className = 'meilisearch-link';
+                const extract = node.querySelector('.extract');
+                const path    = node.querySelector('.pfad');
+                const link    = node.querySelector('.masterurl');
 
-                if (hit.poster) {
+                // Title
-                    const img = document.createElement('img');
-                    img.src = hit.poster;
-                    img.alt = '';
-                    img.loading = 'lazy';
-                    link.appendChild(img);
-                }
-
-                const title = document.createElement('h3');
                 title.textContent = hit.title || '';
-                link.appendChild(title);
 
+                // Link
+                link.href = hit.url || '#';
+                link.title = hit.title || '';
+
+                // Extract / highlight
                 if (hit._formatted?.text) {
-                    const extract = document.createElement('p');
-                    extract.className = 'meilisearch-extract';
                     extract.innerHTML = hit._formatted.text;
-                    link.appendChild(extract);
+                } else {
+                    extract.textContent = '';
                 }
 
-                article.appendChild(link);
+                // Path (URL ohne Schema)
-                results.appendChild(article);
+                if (hit.url) {
+                    path.textContent = hit.url.replace(/^https?:\/\//, '');
+                }
+
+                // Image
+                if (hit.poster) {
+                    image.style.backgroundImage = `url(${hit.poster})`;
+                } else {
+                    image.style.backgroundImage = '';
+                }
+
+                results.appendChild(node);
             }
         }
     });