메인페이지 검색기능

ComponentEvent class를 만들고 싱글톤으로 객체를 생성한다

 

class ComponentEvent {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new ComponentEvent();
        }
        return this.#instance;
    }

    addClickEventSearchButton() {
        const searchButton = document.querySelector(".search-button");
        const searchInput = document.querySelector(".search-input");
        searchButton.onclick = () => {
            location.href = `http://localhost:8000/search?searchValue=${searchInput.value}`;
        }

        searchInput.onkeyup = () => {
            if(window.event.keyCode == 13) {
                searchButton.click();
            }
        }
    }
}

 

search-button과 search input를 가져와서 버튼을 클릭했을때 Controller에 입력한 책 정보를 파라매터값으로 주고 요청한다

 

  searchButton.onclick = () => {
            location.href = `http://localhost:8000/search?searchValue=${searchInput.value}`;
        }

 

검색 버튼을 클릭했을떄 search 페이지로 들어가도록 요청하고 ?searchValue={searchInput.value} search페이지에 쿼리스트링으로 index페이지의 검색값을 search에 넘겨준다

 

 searchInput.onkeyup = () => {
            if(window.event.keyCode == 13) {
                searchButton.click();
            }

Enter 버튼을 클릭했을때도 똑같은 이벤트가 일어나도록 해준다

 

index페이지에서 search페이지로 값을 넘겨주었으므로 search.js에서 index로부터 받은 값을 받아 요청을 보낸다

  onLoadSearch() {
        const URLSearch = new URLSearchParams(location.search);
        if(URLSearch.has("searchValue")){
            const searchValue = URLSearch.get("searchValue");
            if(searchValue == "") {
                return;
            }
            const searchInput = document.querySelector(".search-input");
            searchInput.value = searchValue;
            const searchButton = document.querySelector(".search-button");
            searchButton.click();
        }
    }

 

 const URLSearch = new URLSearchParams(location.search);

URLSearch 객체를 생성하고(search페이지의 쿼리스트링을 가져오기 위한 객체) 객체의 생성자 안에 (location.search)를 넣는다. (해당 쿼리스트링의 값을 가져온다)

 

 if(URLSearch.has("searchValue")){
            const searchValue = URLSearch.get("searchValue");
             const searchInput = document.querySelector(".search-input");
            searchInput.value = searchValue;
            const searchButton = document.querySelector(".search-button");
            searchButton.click();
        }

 

만약 쿼리스트링 값 (searchValue)값이 존재한다면 그 값을 searchValue변수 안에 넣는다

search input을 가져와서 searchValue를 input창 안에 넣어준다

버튼을 가져와서 searchButton.click();을 해서 버튼을 클릭했을때의 ajax요청 이벤트를 호출한다

 

 if(searchValue == "") {
                return;
            }

searchValue값이 없다면 함수를 종료한다

 

결과

녹화_2023_07_31_21_10_45_900.mp4

1.19MB

window.onload = () => {
    HeaderService.getInstance().loadHeader();

    SearchService.getInstance().clearBookList();
    SearchService.getInstance().loadSearchBooks();
    SearchService.getInstance().loadCategories();
    SearchService.getInstance().setMaxPage();
    
    ComponentEvent.getInstance().addClickEventCategoryCheckboxs();
    ComponentEvent.getInstance().addScrollEventPaging();
    ComponentEvent.getInstance().addClickEventSearchButton();
    
    SearchService.getInstance().onLoadSearch();

}

 SearchService.getInstance().onLoadSearch();

 

window.onload에 onLoadSearch()를 등록한다

녹화_2023_07_31_21_24_35_205.mp4

1.28MB

녹화_2023_07_31_21_10_45_900.mp4

1.19MB