[javascript] 검색쿠키(cookie)를 남겨 필터기능을 구현해보자

검색 필터링 기능을 통해서 원하는 테이블 데이터를 도출해내는 기능이다.
해당 기능은 AWS EC2(아마존 웹서비스) 인스턴스 검색 필터링을 벤치마킹 하였다

필터링은 AND 방식으로 검색되며, 한번 검색한 필터링 키워드는 쿠키에 저장되어 사용자가 필터를 지우지 않을 경우 다음번에 접속해도 필터링 검색 내용이 남아있다.

웹 브라우저에 쿠키를 세팅하는 함수
setFilterCookie(쿠키이름,쿠키값,쿠키유지일수) 정도라고 생각하면된다.
setFilterCooke('searchData',text,3) searchData라는 쿠키가 생성되고 text 값이 들어가고 3일간 쿠키가 유지된다!

function setFilterCookie(Name,value,days) {
    let exdate = new Date();
    //설정 일수 만큼 현재시간에 만료값으로 지정함
    exdate.setDate(exdate.getDate() + days);
    document.cookie = Name + '=' + value + ';expires=' + exdate.toUTCString() + ';path=/';
}

cookie get 함수, 말그대로 cookieName 을 통해 값을 도출

function getFilterCookie(name) {
    name = new RegExp(name + '=([^;]*)');
    return name.test(document.cookie) ? unescape(RegExp.$1) : '';
 }

이제 검색창에서 검색을 했을때, 필터태그 박스가 생성되게 하고, 생성된 태그를 x버튼 클릭시 사라지게 하는 UI를 만들어보자

function setFilterTag(keyword,filter_keyword_array) {
    //console.log(filter_keyword_array);
    //검색 필터 내용이 해당 Array에 저장됩니다.
    let data = filter_keyword_array;
    console.log(data.length);
    let license_header = document.getElementById('table_header');

    //필터 UI를 구성합니다.
    let license_filter_token = document.createElement('div');
    license_filter_token.style.display = 'block';
    license_filter_token.innerHTML = 'Search : '+ keyword;
    license_filter_token.classList.add('license_token')
    license_filter_token.classList.add('l_margin_small');
    license_header.appendChild(license_filter_token);



    //필터링 검색어 태그 삭제 / 이벤트 종료
    let license_filter_close = document.createElement('span');
    license_filter_close.classList.add('license_filter_close');
    license_filter_token.appendChild(license_filter_close);

    license_filter_close.addEventListener('click', function () {

        //필터링 검색 배열에서 해당 필터링단어를 삭제합니다.
            for(let index = 0; index < data.length; index++) {
                if(data[index] === keyword) {
                    filter_keyword_array.splice(index,1);
                }
            }

        getFilterData(filter_keyword_array);
        license_filter_token.remove();
    });

    //필터링된 검색어를 기반으로 데이터를 불러옴
    getFilterData(filter_keyword_array);

}

위 소스코드에서 태그 UI를 생성하는 동시에 Table안에 검색된 필터링을 토대로 조건에 맞는 데이터들을 도출하는 작업을 진행한다

//필터링에 검색된 키워드를 기준으로 데이터를 도출하는 함수
function getFilterData(filter_keyword_array) {

    //filterData 라는 이름의 쿠키를 생성하고 검색한 키워드를 쿠키에 저장합니다.
    setFilterCookie('filterData',filter_keyword_array,3);

    let test = document.getElementsByClassName('license_token')
    let $rows = $('#license_td tr');

        //필터에 있는 내용이 모두 다 나와야함.
        $rows.show().filter(function () {
            let text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            if(filter_keyword_array.length === 0) {
                //임시 방편 나중에 다시 짤것.
                //필터 검색이 아무것도 존재하지않으면 그냥 재접속시켜서 리셋
                console.log('data length : ' + filter_keyword_array.length);
              //  location.href = location.protocol + "//" + location.host + "/";
                return;
            }

            if(filter_keyword_array !== null || filter_keyword_array === undefined || filter_keyword_array.length !== 0) {
                for(let i = 0; i <= filter_keyword_array.length; i++) {
                    let val = filter_keyword_array[i].trim(filter_keyword_array[i]).replace(/ +/g, ' ').toLowerCase();
                    //console.log(text.indexOf(val))
                    return !~text.indexOf(val);
                }
            }
        }).hide();

}

사실 위에서 사용한 show().filter 관련 JQuery 부분에 대한 이해가 정확히 되지않은 상태에서 사용, 하드코딩된 부분이 없지않아 있음.

아직 첫번째로 검색한 필터링 내용에 대해서만 검색이 진행되고
2,3번째 검색내용 필터링이 되지않는 부분은 위에서 언급한
show().filter 관련 Jquery 소스 부분의 분석이 좀 더 필요할듯함..