mummert/meilisearch-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfix

Browse Source
This commit is contained in:
Jürgen Mummert
2025-12-31 10:36:04 +01:00
parent e609dca6c8
commit c5ab9f28c8
1 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Resources/contao/templates/frontend_module/mod_meilisearch_search.html.twig
+13 -20
View File
@@ -2,6 +2,7 @@
Meilisearch Frontend Search Meilisearch Frontend Search
Contao 5 – Frontend Module Template Contao 5 – Frontend Module Template
#} #}
<!-- indexer::stop --> <!-- indexer::stop -->
<div <div
id="topsearch" id="topsearch"
@@ -22,15 +23,14 @@ Contao 5 – Frontend Module Template
name="keywords" name="keywords"
id="search_input" id="search_input"
class="text" class="text"
placeholder="Suchbegriff eingeben..." placeholder="Suchbegriff eingeben…"
autocomplete="off" autocomplete="off"
> >
<button <button
type="button" type="button"
class="clear-button" class="clear-button is-hidden"
aria-label="Suche löschen" aria-label="Suche löschen"
hidden
> >
× ×
</button> </button>
@@ -62,17 +62,15 @@ Contao 5 – Frontend Module Template
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const wrapper = document.querySelector('.meilisearch-search'); const wrapper = document.querySelector('.meilisearch-search');
if (!wrapper) { if (!wrapper) return;
return;
}
const input = wrapper.querySelector('#search_input'); const input = wrapper.querySelector('#search_input');
const clear = wrapper.querySelector('.meilisearch-clear'); const clear = wrapper.querySelector('.clear-button');
const results = wrapper.querySelector('#search-results'); const results = wrapper.querySelector('#search-results');
const template = wrapper.querySelector('#search-result-template'); const template = wrapper.querySelector('#search-result-template');
if (!input || !results || !template) { if (!input || !clear || !results || !template) {
console.warn('[Meilisearch] Required elements not found'); console.warn('[Meilisearch] Required elements not found');
return; return;
} }
@@ -94,7 +92,7 @@ Contao 5 – Frontend Module Template
clear.addEventListener('click', () => { clear.addEventListener('click', () => {
input.value = ''; input.value = '';
results.innerHTML = ''; results.innerHTML = '';
clear.hidden = true; clear.classList.add('is-hidden');
input.focus(); input.focus();
}); });
@@ -104,7 +102,8 @@ Contao 5 – Frontend Module Template
input.addEventListener('input', async () => { input.addEventListener('input', async () => {
const query = input.value.trim(); const query = input.value.trim();
clear.hidden = query.length === 0;
clear.classList.toggle('is-hidden', query.length === 0);
if (query.length < 2) { if (query.length < 2) {
results.innerHTML = ''; results.innerHTML = '';
@@ -116,7 +115,7 @@ Contao 5 – Frontend Module Template
try { try {
const response = await index.search(query, { const response = await index.search(query, {
limit: limit, limit,
attributesToRetrieve: [ attributesToRetrieve: [
'title', 'title',
@@ -164,26 +163,20 @@ Contao 5 – Frontend Module Template
const path = node.querySelector('.pfad'); const path = node.querySelector('.pfad');
const link = node.querySelector('.masterurl'); const link = node.querySelector('.masterurl');
// Title
title.textContent = hit.title || ''; title.textContent = hit.title || '';
// Link
link.href = hit.url || '#'; link.href = hit.url || '#';
link.title = hit.title || ''; link.title = hit.title || '';
// Extract / highlight
if (hit._formatted?.text) { if (hit._formatted?.text) {
extract.innerHTML = hit._formatted.text; extract.innerHTML = hit._formatted.text;
} else { } else {
extract.textContent = ''; extract.textContent = '';
} }
// Path (URL ohne Schema)
if (hit.url) { if (hit.url) {
path.textContent = hit.url.replace(/^https?:\/\//, ''); path.textContent = hit.url.replace(/^https?:\/\//, '');
} }
// Image
if (hit.poster) { if (hit.poster) {
image.style.backgroundImage = `url(${hit.poster})`; image.style.backgroundImage = `url(${hit.poster})`;
} else { } else {