diff --git a/frontend/app.js b/frontend/app.js index eb8c1cc..1961f3a 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -771,6 +771,58 @@ function setupEventListeners() { // Compare search let compareSearchTimeout; + let lastCompareSearchData = null; + + function renderCompareResults(data) { + if (!data) return; + lastCompareSearchData = data; + + const results = data.schools.filter(s => !selectedSchools.some(sel => sel.urn === s.urn)); + + const headerHtml = ` +
+ ${results.length} school${results.length !== 1 ? 's' : ''} found + +
+ `; + + if (results.length === 0) { + elements.compareResults.innerHTML = headerHtml + '
No more schools to add
'; + } else { + elements.compareResults.innerHTML = headerHtml + results.slice(0, 10).map(school => ` +
+
${escapeHtml(school.school_name)}
+
${escapeHtml(school.local_authority || '')}${school.postcode ? ' • ' + escapeHtml(school.postcode) : ''}
+
+ `).join(''); + + elements.compareResults.querySelectorAll('.compare-result-item').forEach(item => { + item.addEventListener('click', () => { + const urn = parseInt(item.dataset.urn); + const school = data.schools.find(s => s.urn === urn); + if (school) { + addToComparison(school); + // Re-render results without closing (filter out newly added school) + renderCompareResults(data); + } + }); + }); + } + + // Add close button handler + const closeBtn = elements.compareResults.querySelector('.compare-results-close'); + if (closeBtn) { + closeBtn.addEventListener('click', () => { + elements.compareResults.classList.remove('active'); + elements.compareSearch.value = ''; + }); + } + } + elements.compareSearch.addEventListener('input', async () => { clearTimeout(compareSearchTimeout); const query = elements.compareSearch.value.trim(); @@ -784,41 +836,14 @@ function setupEventListeners() { const data = await fetchAPI(`/api/schools?search=${encodeURIComponent(query)}`); if (!data) return; - const results = data.schools.filter(s => !selectedSchools.some(sel => sel.urn === s.urn)); - - if (results.length === 0) { - elements.compareResults.innerHTML = '
No schools found
'; - } else { - elements.compareResults.innerHTML = results.slice(0, 10).map(school => ` -
-
${escapeHtml(school.school_name)}
-
${escapeHtml(school.local_authority || '')}${school.postcode ? ' • ' + escapeHtml(school.postcode) : ''}
-
- `).join(''); - - elements.compareResults.querySelectorAll('.compare-result-item').forEach(item => { - item.addEventListener('click', () => { - const urn = parseInt(item.dataset.urn); - const school = data.schools.find(s => s.urn === urn); - if (school) { - addToComparison(school); - elements.compareSearch.value = ''; - elements.compareResults.classList.remove('active'); - } - }); - }); - } - + renderCompareResults(data); elements.compareResults.classList.add('active'); }, 300); }); - elements.compareSearch.addEventListener('blur', () => { - setTimeout(() => elements.compareResults.classList.remove('active'), 200); - }); - elements.compareSearch.addEventListener('focus', () => { - if (elements.compareSearch.value.trim().length >= 2) { + if (elements.compareSearch.value.trim().length >= 2 && lastCompareSearchData) { + renderCompareResults(lastCompareSearchData); elements.compareResults.classList.add('active'); } }); @@ -852,6 +877,13 @@ function setupEventListeners() { // Keyboard document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { + // Close compare results if open + if (elements.compareResults.classList.contains('active')) { + elements.compareResults.classList.remove('active'); + elements.compareSearch.value = ''; + return; + } + // Close modal if open closeModal(); } }); diff --git a/frontend/styles.css b/frontend/styles.css index e49e0d9..23507c0 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -476,6 +476,38 @@ body { display: block; } +.compare-results-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.6rem 1rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + font-size: 0.8rem; + color: var(--text-muted); + position: sticky; + top: 0; +} + +.compare-results-close { + width: 24px; + height: 24px; + border: none; + background: transparent; + border-radius: var(--radius-sm); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); + transition: var(--transition); +} + +.compare-results-close:hover { + background: var(--accent-coral); + color: white; +} + .compare-result-item { padding: 0.75rem 1rem; cursor: pointer;