[JavaScript / jQuery] 검색 자동 완성 기능 구현하기

 

    <div class="container padding0">
        ...
            <div class="p-2 bd-highlight srarch-content">
            	<input type="number" placeholder="차량번호를 입력해주세요." class="search-box" id="inspectionComplete-search" autocomplete="off">
            </div>
        </div>      
    </div>
        <div class="container padding0"> 
		<table class="table table-bordered content-Table" id="inspextionComplete-Table">
		  <thead>
		    <tr>
		      <th scope="col">
		      	입차 시간 
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>	
		      </th>
		      <th scope="col">
		      	출차 시간	
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>		      	
		      </th>
		      <th scope="col">
		    	  차량번호
		    	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>	
		      </th>
		      <th scope="col">
		      	  운전자
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>			      	  
		      </th>
		      <th scope="col" hidden="hidden">
		      	  휴대전화번호
		      	<div class="table-order-button">
			      	<button onclick="sort(this)" class="sortBtn" value="down">▼</button>
				</div>			      	  
		      </th>
		    </tr>
		  </thead>
		  <tbody id="tbody">
		    <tr>
		      <td>08:00</td>
		      <td class="fontColorRed">미출차</td>
		      <td>11가 1234</td>
		      <td class="clickText">김길동</td>
		      <td hidden="hidden">01000000000</td>
		    </tr>
		    <tr>
		      <td>08:00</td>		    
		      <td>09:00</td>		    
		      <td>경남02가1234</td>
		      <td class="clickText">박길동</td>
		      <td hidden="hidden">01022222222</td>
		    </tr>
		    <tr>
		      <td>08:00</td>		
		      <td class="fontColorRed">미출차</td>	    
		      <td>대전02리1234</td>
		      <td class="clickText">이길동</td>
		      <td hidden="hidden">01099999999</td>
		    </tr>
		  </tbody>
		</table>  
	</div>

 

 

 

Table 전체 내용을 훑어볼 때 

 	
// DOMContentLoaded 이벤트가 발생하면, 콜백함수 실행
document.addEventListener('DOMContentLoaded', function() {
    // 검색창 element를 id값으로 가져오기
    const payrollSearch = document.querySelector('#inspectionComplete-search');
    
    // 테이블의 tbody element를 id값으로 가져오기
    const payrollTable = document.querySelector('#inspextionComplete-Table tbody');
    
    //검색창 element에 keyup 이벤트 세팅. 글자 입력 시 마다 발생.
    payrollSearch.addEventListener('keyup', function() {
    	 // 사용자가 입력한 검색어의 value값을 가져와 소문자로 변경하여 filterValue에 저장
    	const filterValue = payrollSearch.value.toLowerCase();
   		 // 현재 tbody안에 있는 모든 tr element를 가져와 rows에 저장
    	const rows = payrollTable.querySelectorAll('tr');
        
        //tr들 for문으로 순회
        for (var i = 0; i < rows.length; i++) {
            // 현재 순회중인 tr의 textContent를 소문자로 변경하여 rowText에 저장
            var rowText = rows[i].textContent.toLowerCase();
            // rowText가 filterValue를 포함하면, 해당 tr은 보여지게 하고, 그렇지 않으면 숨긴다.
            if (rowText.includes(filterValue)) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    });
});

 

 

특정 열에서만 검색할 때 (차량번호)

// DOMContentLoaded 이벤트가 발생하면, 콜백함수 실행
document.addEventListener('DOMContentLoaded', function() {
    // 검색창 element를 id값으로 가져오기
    const payrollSearch = document.querySelector('#inspectionComplete-search');
    
    // 테이블의 tbody element를 id값으로 가져오기
    const payrollTable = document.querySelector('#inspextionComplete-Table tbody');
    
    //검색창 element에 keyup 이벤트 세팅. 글자 입력 시 마다 발생.
    payrollSearch.addEventListener('keyup', function() {
    	 // 사용자가 입력한 검색어의 value값을 가져와 소문자로 변경하여 filterValue에 저장
    	const filterValue = payrollSearch.value.toLowerCase();
   		 // 현재 tbody안에 있는 모든 tr element를 가져와 rows에 저장
    	const rows = payrollTable.querySelectorAll('tr');
        
        //tr들 for문으로 순회
        for (var i = 0; i < rows.length; i++) {
            // 현재 순회중인 tr의 textContent를 소문자로 변경하여 rowText에 저장
            var vehicleNumber = rows[i].querySelectorAll('td')[2].textContent.toLowerCase();
            // rowText가 filterValue를 포함하면, 해당 tr은 보여지게 하고, 그렇지 않으면 숨긴다.
            if (vehicleNumber.includes(filterValue)) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    });
});

 

 

공용함수로 뽑아내기

//실시간 검색 input 이벤트리스너
document.addEventListener('DOMContentLoaded', function() {
	    setupSearch('#inspectionComplete-search', '#inspextionComplete-table tbody');
});

document.addEventListener('DOMContentLoaded', function() {
	setupSearch('#exitApprovalWait-search', '#exitApprovalWait-table tbody');
});

document.addEventListener('DOMContentLoaded', function() {
    setupSearch('#exitComplete-search', '#exitComplete-table tbody');
});


/* 검색 */
function setupSearch(inputSelector, tableSelector) {
    const searchInput = document.querySelector(inputSelector);
    const table = document.querySelector(tableSelector);

    if (searchInput && table) {
        searchInput.addEventListener('keyup', function() {
            const filterValue = searchInput.value.toLowerCase();
            const rows = table.querySelectorAll('tr');

            rows.forEach(row => {
                const vehicleNumber = row.querySelectorAll('td')[2].textContent.toLowerCase();
                row.style.display = vehicleNumber.includes(filterValue) ? '' : 'none';
            });
        });
    }
}