6 تکنیک پیشرفته JavaScript برای ساختن رابط های جستجوی سریع در زمان واقعی | آموزش 2024

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

const searchInput = document.querySelector('#search');
const handleSearch = debounce((event) => {
    performSearch(event.target.value);
}, 300);

searchInput.addEventListener('input', handleSearch);

function optimizeSearchQuery(query) {
    return query
        .trim()
        .toLowerCase()
        .replace(/[^\w\s]/g, '')
        .replace(/\s+/g, ' ');

    const searchIndex = new Map();
    document.querySelectorAll('.searchable').forEach(element => {
        const text = element.textContent.toLowerCase();
        searchIndex.set(element, text);
    });
}

class SearchCache {
    constructor(maxSize = 100) {
        this.cache = new Map();
        this.maxSize = maxSize;
    }

    set(query, results) {
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        this.cache.set(query, {
            results,
            timestamp: Date.now()
        });
    }

    get(query) {
        const cached = this.cache.get(query);
        return cached && Date.now() - cached.timestamp < 300000 ? cached.results : null;
    }
}

async function loadSearchResults(query, page = 1) {
    const perPage = 20;
    const results = await fetchResults(query, page, perPage);

    const container = document.querySelector('#results');
    results.forEach(result => {
        const element = createResultElement(result);
        container.appendChild(element);
    });

    if (results.length === perPage) {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                loadSearchResults(query, page + 1);
            }
        });
        observer.observe(container.lastElementChild);
    }
}

function calculateLevenshteinDistance(str1, str2) {
    const matrix = Array(str2.length + 1).fill().map(() => 
        Array(str1.length + 1).fill(0)
    );

    for (let i = 0; i <= str1.length; i++) {
        matrix[0][i] = i;
    }
    for (let j = 0; j <= str2.length; j++) {
        matrix[j][0] = j;
    }

    for (let j = 1; j <= str2.length; j++) {
        for (let i = 1; i <= str1.length; i++) {
            const substitutionCost = str1[i - 1] === str2[j - 1] ? 0 : 1;
            matrix[j][i] = Math.min(
                matrix[j][i - 1] + 1,
                matrix[j - 1][i] + 1,
                matrix[j - 1][i - 1] + substitutionCost
            );
        }
    }
    return matrix[str2.length][str1.length];
}

class SearchHistory {
    constructor(maxItems = 10) {
        this.maxItems = maxItems;
        this.storageKey = 'searchHistory';
    }

    add(query) {
        let history = this.get();
        history = history.filter(item => item !== query);
        history.unshift(query);

        if (history.length > this.maxItems) {
            history.pop();
        }

        localStorage.setItem(this.storageKey, JSON.stringify(history));
    }

    get() {
        const stored = localStorage.getItem(this.storageKey);
        return stored ? JSON.parse(stored) : [];
    }

    clear() {
        localStorage.removeItem(this.storageKey);
    }
}

class SearchInterface {
    constructor() {
        this.cache = new SearchCache();
        this.history = new SearchHistory();
        this.setupEventListeners();
    }

    setupEventListeners() {
        const searchInput = document.querySelector('#search');
        searchInput.addEventListener('input', debounce((e) => {
            this.handleSearch(e.target.value);
        }, 300));
    }

    async handleSearch(rawQuery) {
        const query = this.optimizeQuery(rawQuery);

        if (!query) return;

        const cached = this.cache.get(query);
        if (cached) {
            this.displayResults(cached);
            return;
        }

        const results = await this.fetchResults(query);
        this.cache.set(query, results);
        this.history.add(query);
        this.displayResults(results);
    }

    optimizeQuery(query) {
        return query
            .trim()
            .toLowerCase()
            .replace(/[^\w\s]/g, '')
            .replace(/\s+/g, ' ');
    }

    displayResults(results) {
        const container = document.querySelector('#results');
        container.innerHTML = '';

        results.forEach((result, index) => {
            if (index < 20) {
                container.appendChild(this.createResultElement(result));
            }
        });

        if (results.length > 20) {
            this.setupInfiniteScroll(results.slice(20));
        }
    }
}