Remember Our Search

document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("search-input");

    const searchBtn = document.getElementById("search-btn");
    const suggestionList = document.getElementById("suggestions-list");

    const searchHistory = JSON.parse(localStorage.getItem("searchHistory")) || [];




    //add to search History.
    function addHistory(term) {
        searchHistory.sort();
        if (term && !searchHistory.includes(term)) {
            searchHistory.push(term);
            localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
        }

    }

    searchBtn.addEventListener("click", function () {

        const searchTerm = searchInput.value.trim();
        if (searchTerm.length > 0) {
            addHistory(searchTerm);
            searchInput.value = "";
        }

        //console.log(this);
    });






    //Display the suggestion.
    function displaySuggestion(input) {

        let filterSuggestions = searchHistory.filter((term) => {
            return (term.toUpperCase().includes(input.toUpperCase()));
            //console.log(term);
        });

        if (filterSuggestions.length > 0 && input != "") {
            suggestionList.innerHTML = "";
            filterSuggestions.forEach((term) => {
                suggestionList.style.display = "block";
                console.log(term);
                let li = document.createElement("LI");
                li.textContent = term;
                suggestionList.appendChild(li);
            });

        }
        else {
            suggestionList.style.display = 'none';
        }


        //console.log(filterSuggestions);



    }


    searchInput.addEventListener("input", function () {
        const input = searchInput.value.trim();
        displaySuggestion(input);

    });




    //eventListener for selecting suggesstion.

    suggestionList.addEventListener("click", function (event) {
        console.log(event.target);
        if (event.target.tagName == "LI") {
            searchInput.value = event.target.textContent;

            suggestionList.style.display = "none";
        }
    });


    //Hide suggestion when click outside the suggestion.






});