[개발] 프로그램 지식

[jquery] 실시간 검색 코드, 키보드 누를 때 조회되는 코드

  • -
반응형

1. 검색 영역 

<input type="text" id="searchKeyword" placeholder="검색어를 입력하세요.">

 

 

2. script 영역

	$("#searchKeyword").on("input", function() {
		var searchKeyword = $(this).val().trim().toLowerCase();
		if (searchKeyword === "") {
			// 검색어가 비어있으면 모든 리스트 아이템을 보여줍니다.
			$("#groupTable td").show();
		} else {
			// 검색어가 입력되면 일치하지 않는 리스트 아이템은 숨기고 일치하는 아이템만 보여줍니다.
			$("#groupTable td").each(function() {
				var listItemText = $(this).text().trim().toLowerCase();
				if (listItemText.includes(searchKeyword)) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		}
	});
반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.