[자바스크립트] 검색 구현

<input type="text" id="search" placeholder="제목, 내용, 글쓴이">

<table id="board_table">

<colgroup>

<!-- 라디오 버튼 -->

<col width="5%">

<!-- colspan="2" 이미지 -->

<col width="10%">

<!-- 제목 -->

<col width="30%">

<!-- 가격 -->

<col width="10%">

<!-- 수량 -->

<col width="15%">

<!-- 상태 -->

<col width="10%">

<!-- 편집하기 -->

<col width="20%">

</colgroup>

<thead>

<!-- 라디오 버튼 -->

<th>

<input type='radio'/>

</th>

<!-- 이미지 / 제목 -->

<th colspan="2">제목</th>

<!-- 제목 -->

<!-- <th></th> -->

<th>가격</th>

<th>수량</th>

<th>상태</th>

<th>

<!-- 전체 상품 리스트 / 검색 결과 - 리스트 개수 -->

<div class="dataTables_length" id="board_table_length"

style="margin-left: 28%;">

<label>

<select name="board_table_length" aria-controls="board_table" class=""

style="padding: 9px;">

<option value="10" selected="selected">10개</option>

<option value="50">50개</option>

<option value="100">100개</option>

<option value="250">250개</option>

<option value="500">500개</option>

<option value="1000">1000개</option>

</select>

</label>

</div> <!-- // 전체 상품 리스트 / 검색 결과 - 리스트 개수 -->

</th>

<!-- 편집하기 -->

</thead>

<tbody>

<tr class="tb_content">

<!-- 라디오 버튼 -->

<td>

<input type='radio'/>

</td>

<!-- 이미지 -->

<td></td>

<!-- 제목 -->

<td class="title">공지사항 테스트 (0)</td>

<!-- 조회수 -->

<td class="count">0</td>

<!-- 글쓴이 -->

<td class="writer">이한결</td>

<!-- 등록일 -->

<td class="date">2019.04.04</td>

<!-- 확인하기 / 편집하기 / 삭제하기 -->

<td class="post_buttons">

<button class="btn">확인하기</button>

<div class="dropdown">

<button class="btn-gray"></button>

<div class="dropdown-content" id="myDropdown">

<a href="#">바로가기</a>

<a href="#">편집하기</a>

<a href="#">삭제하기</a>

</div>

</div>

</td>

</tr>

$(document).ready(function() {

// 키보드 키 눌렀을 때 이벤트 발생

$("#search").keyup(function() {

// keyup이 되었을 때 텍스트 필드에 입력한 문자열값을 읽어내 변수 k에 저장

var k = $(this).val();

// 텍스트 필드에 입력한 값을 읽어낸 후에 #board_table > tbody > tr와 같이 자식 선택자를

// 연속으로 사용하여 tbody 태그 내의 tr에 대해 hide() 메서드 호출 후 모두 화면에 보이지않도록 함

$("#board_table > tbody > tr").hide();

// :contains() 필터 활용하여 검색어를 포함하는 tr만 화면에 나타나게 함

// #board_table > tbody > tr > td:nth-child(7n+3):contains('두') 형태의 선택자

// 문자열을 먼저 생성한 후에 $() 함수에 인자로 전달 // 선택자가 복잡하여 미리 문자열을 생성

// #board_table 자식 중 tbody, tbody 자식 중 tr, tr 자식 중 td:nth-child(7n+3)를 찾아

// :contains("두")로 "두"라는 문자열을 포함하는 td셀을 선택

// 화면에 나타나도록 처리하는 요소는 td 부모인 tr이므로 parent() 메서드로 부모 요소를 선택하여 화면에 나타나도록 함

var title = $("#board_table > tbody > tr > td:nth-child(7n+3):contains('" + k + "')");

var writer = $("#board_table > tbody > tr > td:nth-child(7n+5):contains('" + k + "')");

        $(title).parent().show();

        $(writer).parent().show();

    })

});