동적 리스트 필터

#목표

검색어를 검색하면 바로바로 리스트가 바뀌어서 보여진다.

해당 리스트의 검색창에 검색어를 입력하면 리스트에 해당 검색어의 아이템만 보여진다. 

#구현

javascript indexof() 함수를 통해서 해당 검색어가 있으면 엘리먼츠를 display = "block" 으로 하고 없을경우 dispaly = "none"으로 한다. 

이렇게 구현할경우 검색 필터가 순서대로인 단어만 검색해서 한글의경우 완성형 글자가 아닌 글자를 타이핑하고있을때 검색결과창에 해당 검색결과가 나오지않는다. 

초성으로도 검색이 되지않는다.

indexof 로 검색하기때문에 생기는 문제점들인데 검색방법을 달리하면 개선할수 있을것으로 보인다. 

function list_filter(){

    var input, keyword, filter, item, title;

    input  = $("#keyword");
    keyword = input.val().toUpperCase();
    item = $("tbody > tr");
    filter = $("#filter-keyword").text();

    console.log(filter);

    for(var i = 0; i < item.length; i++){
        title = item[i].getElementsByClassName("item-title")[0].innerHTML;

        if(title.toUpperCase().indexOf(keyword) > -1){
            item[i].style.display = "";
        }else{
            item[i].style.display = "none";
        }
    }
}

#차후 목표

한글 검색어 타이핑중 리스트가 사라지는것에 대해 개선해보기