베이스캠프

jQuery contains() 메서드를 활용한 검색기능 구현

박경두2017. 1. 29. 12:46


안녕하세요. 정말 오랜만에 포스팅을 남기네요 ㅎㅎ

겨울방학이 시작하고 1월중말까지 정말 많은 일들이 있었네요.ㅎㅎ 사실 이 일들때문에 글을 작성하지 못했다는 것은 핑계인 것 같고, 앞으로 꾸준히 기술 포스팅을 하도록 하겠습니다. 

그래도 좋은 소식이 있다면, 2월 1일부터 프론트엔드 개발자로서 첫 출근을 시작한다는 점입니다. 그래도 학부시절에 나름대로 이쪽 분야로 가고싶어서 독학을 하며 실력을 키워나갔는데, 첫 직장을 제가 가고싶은 분야로 나아갈 수 있게 되어서 정말 만족스럽습니다.ㅎㅎ 이제 앞으로 역량을 많이 쌓아나가면서 정말 전문가다운 포스팅을 많이 남기도록 하겠습니다! ㅎㅎ


오늘 제가 포스팅할 주제는 jQuery의 contains() 메서드를 활용한 간단한 검색기능 구현입니다. 


contains()



jQuery의 contains() 메서드는 지정한 문자열을 포함하는 요소를 선택할 수 있게 해주는 기능입니다. 여러가지 콘텐트 필터 선택자 중에 하나랍니다.


사용예시


$("div:contains("두"));


div 태그 중에 "두"라는 문자를 포함한 div를 찾아라.


contains() 메서드가 무엇인지 알아봤으니 이제 이를 활용해서 검색 기능을 한번 구해보도록 하겠습니다.



HTML 마크업



기본적인 sample table 코드와 검색을 input 코드를 작성해줍니다.


CSS3



CSS3를 활용하여 table을 보기 편하게 만들어줍니다.


중간점검



HTML 마크업과 CSS를 활용한 결과로 이렇게 깔끔한 테이블과 상단에 검색폼까지 구현할 수 있습니다.

이제 가장 중요한 기능을 넣어보도록 하겠습니다.


jQuery



저희는 이름을 기준으로 검색을 하는 기능을 구현하도록 하겠습니다.



기능을 구현하기 위해 keyup 이벤트를 활용할 것입니다.

나중에 자세히 강의를 통해 소개를 해드릴 예정이지만, 간단하게 keyup 이벤트를 소개하자면 keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 요소에 이벤트를 발생시킨답니다.




keyup되었을 때 사용자가 텍스트 필드에 입력한 문자열값을 읽어내 변수 k에 저장하도록 합니다.

jQuery 이벤트 처리 메서드 내에서 this는 이벤트가 발생된 요소 객체를 가리킨답니다. 

$(this).val()은 이벤트가 발생한 요소 즉, 텍스트 필드의 value 속성값을 읽어내는 기능을 수행합니다.



사용자가 텍스트 필드에 입력한 값을 읽어낸 후에 $("#user-table > tbody > tr")와 같이 자식 선택자를 연속으로 사용하여 <tbody> 태그 내의 <tr>에 대해 hide() 메서드를 호출하여 모두 화면에 보이지 않도록 합니다.



그 후에 :contains() 필터를 활용하여 검색어를 포함하는 <tr>만 화면에 나타나게 합니다.

"#user-table > tbody > tr > td:nth-child(5n+2):contains('두')" 형태의 선택자로서 사용할 수 있는 문자열을 먼저 생성한 후에 $() 함수에 인자로 전달하였는데, 이 부분은 선택자가 복잡하여 미리 문자열을 생성하는 편이 좋을 것이라 생각했기 때문입니다. 이 선택자의 의미는 #user-table의 자식 중 tbody, tbody 자식 중 tr, tr 자식 중 td:nth-child(5n+2)를 찾아 :contains("두")로 "두"라는 문자열을 포함하는 td셀을 선택합니다. 하지만 저희가 화면에 나타나도록 처리하는 요소는 td의 부모인 tr이므로 parent() 메서드로 부모 요소를 선택하여 화면에 다시 나타나도록 했습니다.


결과물




텍스트박스에 타이핑할 때마다 화면에 보이는 행이 변경되는 것을 확인할 수 있습니다. jQuery를 활용하면 이렇게 단 몇 줄로 신기한 기능을 구현할 수 있습니다!

  • 걱정하지않는자2018.05.17 08:30

    감사합니다

  • noname2018.08.21 20:24

    정말 진짜 정말 정말 정말 감사드려요ㅠㅠ 계속 찾아다니다가 안나와서 DB에 넣어서 검색해야 했는데 간단하게 해결해주시네요ㅠㅠ 정말 정말 감사드려요

  • 김명훈2018.12.04 13:49

    좋은 글 감사합니다. 질문이 하나 있는데요 글에서
    var temp = $("#user-table > tbody > tr > td:nth-child(5n+2):contains('" + k + "')"); 부분중 td:nth-child(5n+2) 이부분에서 5n+2가 정확히 무엇을 고르나요?? 이해가 잘 안돼서 질문드립니다.

  • 5446085458245506892018.12.31 11:17

    안뜨는데요?