Javascript OOP

import $ from 'jquery';

class Search {
    // 1. Describe or create/initiate our object.
    constructor() {
        this.addSearchHTML();
        this.resultsDiv = $("#search-overlay__results");
        this.openButton = $(".js-search-trigger");
        this.closeButton = $(".search-overlay__close");
        this.searchOverlay = $(".search-overlay");
        this.isSpinnerShowing = false;
        this.searchField = $("#search-term");
        this.events(); // call and load the events.
        this.previousValue;
        this.typingTimer;
    }

    // 2. Events
    events() {
        this.openButton.on("click", this.openOverlay.bind(this));
        // the "on" method in jQuery sets the "this" to the element. We use the "bind()"
        // method to tell jQuery to not do that and set it to our object with "this".
        this.closeButton.on("click", this.closeOverlay.bind(this));
        this.searchField.on("keyup", this.typingLogic.bind(this)); // Keydown is too fast.
    }

    // 3. Methods (function, actions...)
    typingLogic() {
        // Only if the key strokes have changed the value do we want to do any of this.
        if (this.searchField.val() != this.previousValue) {
            clearTimeout(this.typingTimer); // clear the timer so we don't hit the search repeatedly.

            if (this.searchField.val()) {
                if ( !this.isSpinnerShowing ) {
                    this.resultsDiv.html('<div class="brent-spiner-loader"><i class="fa-solid fa-fan brent-spiner"></i></div>');
                    this.isSpinnerShowing = true;
                }
                this.typingTimer = setTimeout(this.getResults.bind(this), 750);
            } else {
                this.resultsDiv.html('');
                this.isSpinnerShowing = false;
            }
        }
        this.previousValue = this.searchField.val();
    }

    getResults() {
        // the arrow function "=>" doesn't change the value of the "this" keyword.
        // See functions file for the wp_localize_script() to understand the joshcoastData.root_url
        $.getJSON( joshcoastData.root_url + '/wp-json/wp/v2/pages?search=' + this.searchField.val(), posts => {
            this.resultsDiv.html(`
                <h2>Search Results</h2>
                ${posts.length ? '<ul>' : '<p>No search results</p>'}
                    ${posts.map(item => `<li><a href='${item.link}'>${item.title.rendered}</a></li>`).join('')}
                ${posts.length ? '</ul>' : '' }
            `);
            this.isSpinnerShowing = false;
        });
    }
    openOverlay() {
        this.searchOverlay.addClass("search-overlay--active");
        $('body').addClass("no-scroll");
        console.log("imhere");
    }

    closeOverlay() {
        this.searchOverlay.removeClass("search-overlay--active");
        $('body').removeClass("no-scroll");
    }

    addSearchHTML() {
        $("body").append(`
            <div class="search-overlay">
                <div class="search-overlay__top">
                    <i class="fa-solid fa-magnifying-glass search-overlay__icon" aria-hidden="true" ></i>
                    <div class="container">
                        <input type="text" class="search-term" placeholder="What are you looking for?" id="search-term">
                    </div>
                    <i class="fa-regular fa-circle-xmark search-overlay__close" aria-hidden="true"></i>
                </div>
                <div class="container">
                    <div id="search-overlay__results" class="search-overlay__results">
                    </div>
                </div>
            </div>
        `);
    }
}

export default Search;