markmywords/static/search.js

// Search functionality for markmywords

function performSearch() {
    const searchInput = document.getElementById('searchInput');
    const query = searchInput.value.trim();
    
    if (query.length < 2) {
        alert('Please enter at least 2 characters to search');
        return;
    }
    
    fetch(`/api/search?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            displaySearchResults(data.results, query);
        })
        .catch(error => {
            console.error('Search error:', error);
            alert('An error occurred during search');
        });
}

function displaySearchResults(results, query) {
    const searchResultsDiv = document.getElementById('searchResults');
    const resultsList = document.getElementById('resultsList');
    
    resultsList.innerHTML = '';
    
    if (results.length === 0) {
        resultsList.innerHTML = '<p>No results found for "' + escapeHtml(query) + '"</p>';
        searchResultsDiv.style.display = 'block';
        return;
    }
    
    results.forEach(result => {
        const resultItem = document.createElement('div');
        resultItem.className = 'result-item';
        
        const link = document.createElement('a');
        link.href = `/view/${result.path}`;
        link.textContent = result.title || result.path;
        
        const pathSpan = document.createElement('div');
        pathSpan.className = 'result-path';
        pathSpan.textContent = result.path;
        
        resultItem.appendChild(link);
        resultItem.appendChild(pathSpan);
        
        resultsList.appendChild(resultItem);
    });
    
    searchResultsDiv.style.display = 'block';
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

// Allow search on Enter key
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                performSearch();
            }
        });
    }
});