버튼 필터링 + 검색어 입력 후 검색버튼 클릭(select option 선택 후 주제에 따라 검색하는 기능) javaScript

HTML

<!-- 버튼필터링 영역 -->
<ul id="title">
  <li class="btn hover" onclick="filterSelection('dog')">강아지</li>
  <li class="btn hover" onclick="filterSelection('cat')">고양이</li>
  <li class="btn hover" onclick="filterSelection('rabbit')">토끼</li>
</ul>

<!-- 검색&버튼 필터링 영역 -->
<div class="search">
  <select id="selec">
    <option value="제목">제목</option>
    <option value="제작처">제작처</option>
  </select>
  <input type="text" id="keyword" placeholder="검색어를 입력하세요.">
  <input type="button" onclick="search()" value="검색">
</div>

<!-- 컨텐츠 영역 -->
<div class="contents">
  <!-- class 차례대로 css, js, 버튼필터링용 -->
  <div class="contentsBox contentsBox_js dog">강아지1</div>
  <div class="contentsBox contentsBox_js dog">강아지2</div>
  <div class="contentsBox contentsBox_js cat">고양이1</div>
  <div class="contentsBox contentsBox_js cat">고양이2</div>
  <div class="contentsBox contentsBox_js rabit">토끼</div>
</div>

CSS

.contents {
  display: flex;
  flex-wrap: wrap;
}
/* 기본 display는 none이며 버튼필터링 js로 출력유무를 지정함 */
.contentsBox {
  display: none;
}
.show { display: block; }
.hide { display: none; }

JS

// 버튼필터링 js
filterSelection("radio")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("contentsBox_js");
  // All button이 있을 경우 "radio"를 "all"등의 all button의 filterSelection을 입력
  // if (c == "radio") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}
// 버튼 클릭 시 .hover클래스를 추가, 삭제하는 js
var btnContainer = document.getElementById("title");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("hover");
    current[0].className = current[0].className.replace(" hover", "");
    this.className += " hover";
  });
}


// 검색&버튼 영역 js
function search() {
  let search = document.getElementById("keyword").value;
  let listInner = document.getElementsByClassName("contentsBox_js");
  //#selec(selet박스)에서 선택된 option의 텍스트값을 가져옴
  let s = document.getElementById("selec");
  let selec = s.options[s.selectedIndex].text;

  for (let i = 0; i < listInner.length; i++) {
    let ad = listInner[i].getElementsByClassName("ad_js");
    let client = listInner[i].getElementsByClassName("client_js");
    // 검색버튼 클릭 시 모든 .show 를 제거하여 초기화하여 버튼필터링 기능을 초기화함
    listInner[i].classList.remove("show");
    
    //선택된 option의 텍스트값에 따라서 검색할 수 있는 코드
    if (selec === "제목"){
      if (ad[0].innerText.indexOf(search) != -1) {
        // listInner[i].style.display = "block";
        listInner[i].classList.add("show");
      } else {
        // listInner[i].style.display = "none"
        listInner[i].classList.add("hide");
      }
    } else if (selec === "제작처") {
      if (client[0].innerText.indexOf(search) != -1) {
        // listInner[i].style.display = "block";
        listInner[i].classList.add("show");
      } else {
        // listInner[i].style.display = "none"
        listInner[i].classList.add("hide");
      }
    }
  }
}

각 탭을 누르면 해당하는 컨텐츠가 보여지고 select의 option을 선택하고 검색하면 해당하는 컨텐츠가 보여짐

 

 

버튼필터링쪽은 아직 전부 이해하지는 못했다.. 

w3c에서 제공하는 스크립트는 모든 컨텐츠를 보여주는 버튼도 있으나 나는 각 주제에 맞는 것만 보여져야 하기 때문에 all 버튼으로 추정되는 스크립트를 삭제했다

버튼클릭 시 css가 변경되는 스크립트도 같이 있길래 같이 적용했는데 확실이 jQuery보다 복잡하고 어렵다..ㅠㅠ

 

검색영역은 처음에는 입력하는 순간 검색이 되는 스크립트를 기반으로 시작했다.

입력받은 값이 인식되는 onkeyup이벤트에서 검색버튼을 누르면 실행되는 onclick로 변경하였다.

select에서 선택된 option의 텍스트값(왜진지 valeu는 불러오지 못해서 text값으로 대체함)에서 검색어를 비교하여 검색버튼을 눌렀을 때 결과값이 나오도록 했다.

let s = document.getElementById("selec"); // <select> 태그의 id값을 가져와야 함
let selec = s.options[s.selectedIndex].text;

위에서 만약 value값을 가져오고 싶으면 text를 value로 변경하면 된다고 한다.

참고 사이트

*버튼필터링

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements 

W3Schools online HTML editor

*사이트 내 검색기능 (입력하는순간 검색 되는 기능)

https://goddino.tistory.com/97