54 lines
2.3 KiB
HTML
54 lines
2.3 KiB
HTML
|
<!-- Search Modal -->
|
||
|
|
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content bg-dark text-light">
|
||
|
|
<div class="modal-header border-0 pb-1">
|
||
|
|
<h5 class="modal-title" id="searchModalLabel">Search Notes</h5>
|
||
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body pt-1">
|
||
|
|
<input type="text" id="modal-search-input" class="form-control mb-3" placeholder="Search all notes...">
|
||
|
|
<div id="modal-search-results" style="max-height: 300px; overflow-y: auto;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Search Modal JavaScript -->
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
var searchModal = document.getElementById('searchModal');
|
||
|
|
var openSearchBtn = document.getElementById('open-search-modal');
|
||
|
|
var modalInput = document.getElementById('modal-search-input');
|
||
|
|
var modalResults = document.getElementById('modal-search-results');
|
||
|
|
if (openSearchBtn && searchModal && modalInput && modalResults) {
|
||
|
|
openSearchBtn.addEventListener('click', function() {
|
||
|
|
var modal = new bootstrap.Modal(searchModal);
|
||
|
|
modal.show();
|
||
|
|
setTimeout(function() { modalInput.focus(); }, 300);
|
||
|
|
});
|
||
|
|
modalInput.addEventListener('input', function() {
|
||
|
|
var q = modalInput.value.trim();
|
||
|
|
if (!q) { modalResults.innerHTML = ''; return; }
|
||
|
|
// AJAX search
|
||
|
|
fetch(`/search?q=${encodeURIComponent(q)}`)
|
||
|
|
.then(r => r.json())
|
||
|
|
.then(results => {
|
||
|
|
if (!results.length) { modalResults.innerHTML = '<div class="text-muted small">No results found.</div>'; return; }
|
||
|
|
modalResults.innerHTML = results.map(r =>
|
||
|
|
`<div class="mb-2">
|
||
|
|
<a href="${r.url}" class="fw-bold text-primary">${r.title}</a><br>
|
||
|
|
<span class="small text-light">...${r.snippet}...</span>
|
||
|
|
</div>`
|
||
|
|
).join('');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
// Clear results/input on close
|
||
|
|
searchModal.addEventListener('hidden.bs.modal', function() {
|
||
|
|
modalInput.value = '';
|
||
|
|
modalResults.innerHTML = '';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|