국비 교육 83일차 - AJAX 검색 기능 활용

 

이번주 내내 spring 구조를 배우고 있어서 거의  실제 프로젝트에 적용하는데 주력하고 있다.

 

 

 이렇게 음악 리스트를 출력하고 ajax를 통해 검색하는 방법을 살펴보겠다.

 

$(function(){
	$('#keyword').keyup(function(){
		let k=$(this).val();
		$('#user-table > tbody > tr').hide();
		let temp=$('#user-table > tbody > tr > td:nth-child(6n+4):contains("'+k+'")');
		$(temp).parent().show();
	})
});

 이게 값을 찾아오는 ajax코드

 

노래 제목으로 값을 찾아오고 있기 때문에, td의 4번째 값들에 검색어로 받아온 값(k)가 있는지 찾는다. 

만약 있다면 그 결과값을 parent, 즉 list.jsp위에서 바로 보여질 수 있게끔 만들고 있는 코드이다.

 

이걸 내가 이해했는지 확인하기 위해 게시판 데이터로 한번 연습을 해보겠다.  

 

헤헤 성공!!