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 = `
+
+ `;
+
+ 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;