<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">class SearchBar {
    constructor(searchBarId, dropdownMenuId) {
		this.themeSel = Cookies.get('theme') === 'light' ? 'dark' : 'light';
        this.searchInput = document.querySelector(`${searchBarId} input`);
        this.searchBar = document.querySelector(searchBarId);
        this.dropdownMenu = document.querySelector(dropdownMenuId);
        this.searchButton = this.dropdownMenu.querySelector('.btn-' + this.themeSel);
        this.searchTimeout = null;

        this.popularSearchItems = $(`.popular-search-item`, this.dropdownMenu).clone(true);
        this.popularCategoryItems = $(`.popular-category-item`, this.dropdownMenu).clone(true);

        this.initializeEventListeners();
    }

    throttleSearch(callback, delay) {
        if (this.searchTimeout) {
            clearTimeout(this.searchTimeout);
        }
        this.searchTimeout = setTimeout(callback, delay);
    }

    updateDropdownContent(data) {
        let html_videos = '';
        let html_categories = '';

        // Videos section
        if (data.videos.length &gt; 0) {
            data.videos.forEach(video =&gt; {
                html_videos += `
                    &lt;li class="popular-search-item"&gt;
                        &lt;a class="dropdown-item" href="/search/?s=${video.query}"&gt;
                            ${video.keyword}
                        &lt;/a&gt;
                    &lt;/li&gt;
                `;
            });
        } else {
            html_videos += `
                    &lt;li class="popular-search-item"&gt;
                        &lt;a class="dropdown-item disabled" aria-disabled="true"&gt;
                            No results
                        &lt;/a&gt;
                    &lt;/li&gt;
                `;
        }

        $('.popular-search-item', this.dropdownMenu).remove();
        $(html_videos).insertAfter('.popular-search-heading', this.dropdownMenu);

        // Categories section
        if (data.categories.length &gt; 0) {
            data.categories.forEach(category =&gt; {
                html_categories += `
                    &lt;li class="popular-category-item"&gt;
                        &lt;a class="dropdown-item" href="/${category.slug}/"&gt;
                            ${category.name}
                        &lt;/a&gt;
                    &lt;/li&gt;
                `;
            });
        } else {
            html_categories += `
                    &lt;li class="popular-category-item"&gt;
                        &lt;a class="dropdown-item disabled" aria-disabled="true"&gt;
                            No results
                        &lt;/a&gt;
                    &lt;/li&gt;
                `;
        }

        $('.popular-category-item', this.dropdownMenu).remove();
        $(html_categories).insertAfter('.popular-category-heading', this.dropdownMenu);
    }

    async performSearch() {
        const searchTerm = this.searchInput.value.trim();

        if (searchTerm.length &lt; 2) {
            $('.popular-search-item, .popular-category-item', this.dropdownMenu).detach();
            $(this.popularSearchItems).insertAfter('.popular-search-heading', this.dropdownMenu);
            $(this.popularCategoryItems).insertAfter('.popular-category-heading', this.dropdownMenu);
            return;
        }

        try {
            const response = await fetch(`/suggest.php?s=${encodeURIComponent(searchTerm)}`);
            const data = await response.json();
            this.updateDropdownContent(data);
        } catch (error) {
            console.error('Search error:', error);
        }
    }

    initializeEventListeners() {
        // Input event
        this.searchInput.addEventListener('input', () =&gt; {
            let dropdownEl = new bootstrap.Dropdown(this.searchBar);
            dropdownEl.show();
            this.throttleSearch(() =&gt; this.performSearch(), 300);
        });

        // Focus event
        this.searchInput.addEventListener('focus', () =&gt; {
            if (this.searchInput.value.trim().length &gt;= 2) {
                this.performSearch();
            }
        });

        // Enter key press
        this.searchInput.addEventListener('keypress', (e) =&gt; {
            if (e.key === 'Enter') {
                e.preventDefault();
                const searchTerm = this.searchInput.value.trim();
                if (searchTerm) {
                    window.location.href = '/search/?s=' + encodeURIComponent(searchTerm);
                }
            }
        });

        // Escape key press
        this.searchInput.addEventListener('keyup', (e) =&gt; {
            if (e.key === 'Escape') {
                e.preventDefault();
                this.searchInput.value = '';
                this.searchInput.blur();
                this.performSearch();
            }
        });

        // Search button click
        this.searchButton.addEventListener('click', (e) =&gt; {
            e.preventDefault();
            const searchTerm = this.searchInput.value.trim();
            if (searchTerm) {
                window.location.href = '/search/?s=' + encodeURIComponent(searchTerm);
            }
        });
    }
}

// Initialize search when DOM is loaded
document.addEventListener('DOMContentLoaded', () =&gt; {
    // Initialize desktop search
    new SearchBar('#desktop-search-bar', '#desktop-search-dropdown-menu');

    // Initialize mobile search
    new SearchBar('#mobile-search-bar', '#mobile-search-dropdown-menu');
});</pre></body></html>