김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • ErrorPage
  • 자바공부
  • http에러메세지
  • 풀스택
  • 코딩
  • 백앤드
  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자
  • 객체지향프로그래밍
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • HTML공부
  • web.xml수정
  • 코딩공부
  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • 자바
  • 코딩공부 #자바공부
  • httperror
  • 개발자
  • 프론트앤드
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환
⁂ AJAX/: 기본 익히기

[AJAX] #5 - 검색 기능 구현하기

⁂ AJAX/: 기본 익히기

[AJAX] #5 - 검색 기능 구현하기

2022. 11. 10. 09:58

1. 검색 기능 구현하기

 

 이번엔 검색 기능을 구현해보고자 한다.

 한 글자를 쓸 때마다 그것에 반응하여 검색 결과를 매핑시켜 출력시키는 형태로 출력을 해보자!

 

1) JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>searchTest.jsp</title>
	<script src="../js/jquery-3.6.1.min.js"></script>
</head>
<body>
	<h3>교재 검색</h3>
	
	<form name="search" id="search">
		<input type="text" name="keyword" id="keyword" />
		<input type="button" value="검색" />
	</form>
	
	<script>
		$("#keyword").keyup(function(){
			alert("test");
		}); // keyup() end
	</script>
</body>
</html>

 

 우선 keyup() 메소드를 사용하여 키보드로 무언가가 입력되었을 때마다 알람창이 뜨게 하였다.

 

keyup() : 누른 키에서 손을 뗄 때 실행
keydown() : 키보드를 누를 때 실행. 계속 누르고 있다면 계속 실행
keypress() : 키보드를 누를 때 실행. 계속 누르고 있다면 계속 실행

keydown() 과 keypress()의 차이점 : keypress()는 입력할 수 있는 키를 눌렀을 때만 반응한다. 예를 들어 방향키, delete 같은 test 입력에 반영되는 키가 아니라면 이벤트가 반응하지 않는다. keydown()은 모든 키에 반응한다.

 

 

2) 컨트롤러 추가하기 :  BookCont.java

 

- searchform.do 명령어 매핑하기

// 결과 확인 http://localhost:9095/book/searchform.do

@RequestMapping("/searchform.do")
public String bookSearch() {
    return "book/searchTest";
} // bookSearch() end

 아래의 검색창에 키보드로 무언가를 입력할 때마다 test라는 알림창이 뜨는 것을 확인할 수 있을 것이다.


 

searchTest.jsp

교재 검색


 

3) 검색 기능 넣기 :  searchTest.jsp

- 검색어 가져오기 1) 일반적인 형태의 .val() 메서드 활용

 이번엔 입력된 검색어를 가져와보자.

	<script>
		$("#keyword").keyup(function(){
			// alert("test");
			
			// 1) id="keyword" 값 가져오기
			let params = $("#keyword").val();
			alert(params);
			
		}); // keyup() end
	</script>

 

- 검색어 가져오기 2) .serialize() 메서드 활용하기

	<script>
		$("#keyword").keyup(function(){
			// alert("test");
			
			// 1) id="keyword" 값 가져오기
			// let params = $("#keyword").val();
			// alert(params);
			
			// 2) <form id="search"></form>
			// 폼 안의 모든 컨트롤 요소들 가져오기
			let params = $("#search").serialize();
			alert(params); // keyword="입력값"
			
		}); // keyup() end
	</script>

 

 처음에 매핑해두었던 keyword="입력값"의 형태로 알람창이 출력된다.

 

- 검색어가 존재하지 않을 때 출력결과 숨기기

if($("#keyword").val()==""){	// 검색어가 존재하지 않으면
    $("#panel").hide();			// 출력 결과 숨기기
} // if end

 

- 검색했을 시 searchproc.do 명령어와 매핑시키기

	<script>
		$("#keyword").keyup(function(){
			// alert("test");
			
			if($("#keyword").val()==""){	// 검색어가 존재하지 않으면
				$("#panel").hide();			// 출력 결과 숨기기
			} // if end
			
			// 1) id="keyword" 값 가져오기
			// let params = $("#keyword").val();
			// alert(params);
			
			// 2) <form id="search"></form>
			// 폼 안의 모든 컨트롤 요소들 가져오기
			let params = $("#search").serialize();
			// alert(params); // keyword="입력값"
			
			$.post("searchproc.do", params, responseProc);
			
		}); // keyup() end
		
		function responseProc(data){
			alert(data);
		}// responseProc() end

 

4) 컨트롤러에서 검색 기능 구현하기 : searchproc.do

 검색했을 시 검색한 단어를 갖고 있는 제목들을 찾아보려 한다.

 지금은 DB를 연결하지 않았으므로 임의로 배열을 만들어주었다.

 

 ① searchproc.do 명령어 매핑

 검색어를 입력할 때마다 searchproc.do 명령어가 반응하게 하기 위한 코드이다.

 검색어에 대한 코드 구현은 따로 search() 메서드를 구현하였다.

@ResponseBody
@RequestMapping("/searchproc.do")
public String searchProc(HttpServletRequest req) {
    String keyword = req.getParameter("keyword").trim();
    String message = "";

    if(keyword.length()>0) { // 검색어가 존재하는지
        // 예) 검색어 : 자바
        ArrayList<String> list = search(keyword);
        message = list.toString();
    } // if end

    return message;
} // searchProc() end

 

 ② search() 메서드 구현

 여기서 우리는 배열 안에 소문자로 시작하는 제목이 없고, 대문자 또는 한글로만 시작하는 제목들만 넣어두었기 때문에 toUpperCase() 메서드를 활용하였다.

 한글은 자바 내에서 비교값으로 직접적으로 값으로 입력할 수 없다.

 그렇기에 한글이 표현될 때 대문자화에 영향을 받지 않으므로 toUpperCase()로 담아서 한글을 비교하는 것이다.

 (참고 : https://ooz.co.kr/254)

public ArrayList<String> search(String keyword){
    // 검색하고자 하는 문자열 목록
    // 예) where title like '%자바%'
    String[] keywords = {"Ajax", "Ajax 실전 프로그래밍", "자바",
                         "웹프로그래밍", "웹마스터", "자바 프로그래밍",
                         "자전거", "자라", "JSP 프로그래밍",
                         "자바 안드로이드"};

    // keyword를 keywords 배열에서 첫글자부터 비교해서 같다면 ArrayList에 저장해 리턴
    ArrayList<String> list = new ArrayList<>();
    for(String word : keywords) {
        word = word.toUpperCase();
        if(word.startsWith(keyword.toUpperCase())) {
            list.add(word);
        } // if end
    } // for end

    return list;

} // search() end

 

 

 ③ 검색 결과창 꾸미기 : searchProc() 수정

 응답 메세지(자바 검색 시) → 검색 결과 : 3개 | "자바", "자바 프로그래밍", "자바 안드로이드"

@ResponseBody
@RequestMapping("/searchproc.do")
public StringBuilder searchProc(HttpServletRequest req) {
    String keyword = req.getParameter("keyword").trim();
    StringBuilder message = new StringBuilder();

    if(keyword.length()>0) { // 검색어가 존재하는지
        // 예) 검색어 : 자바
        ArrayList<String> list = search(keyword);
        // message = list.toString();
        // 응답 메세지 -> 검색 결과 : ~~ 개 | "자바", "자바 프로그래밍", "자바 안드로이드"
        int size = list.size(); // 3
        if(size>0) {
            message.append("검색 결과 : " + size + "개 | ");
            for(int i=0; i<size; i++) {
                String title = list.get(i);
                message.append(title);
                if(i<size-1) { // 맨 마지막 책 제목에는 , 를 붙이지 않음
                    message.append(",");
                } // if end
            } // for end
        } // if end	
    } // if end

    return message;
} // searchProc() end

 

 강사님은 그냥 String을 쓰셨지만 나는 StringBuilder로 구현해보았다.

 

 

 

5) 알림창이 아니라 직접 뷰단에 출력시키기 : responseProc(data) 함수 수정

function responseProc(data){
    // alert(data);
    // 예) 3|"자바", "자바 프로그래밍", "자바 안드로이드"

    if(data.length>0){ // 응답 받은 내용이 있는지
        let result = data.split("|");
        // alert(result[0]); // 3
        // alert(result[1]); // "자바", "자바 프로그래밍", "자바 안드로이드"
        let title = result[1].split(",");
        let str = ""; // 최종 결과 값
        $.each(title, function(index, key){
            // alert(index);	// 순서
            // alert(key);		// 내용
            str += "<a href='#'>" + key + "</a>";
            str += "<br>"
        }); // each() end

        $("#panel").html(str);
        $("#panel").show();

    } else {
        $("#panel").hide();
    } // if end
}// responseProc() end

 

짱 신기해!!!!

 

 끝!

저작자표시 비영리 동일조건 (새창열림)

'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글

[AJAX] #4 - AJAX로 사진 띄우기  (0) 2022.11.09
[AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용)  (0) 2022.11.09
[AJAX] #2 AJAX 기본 문법 뜯어보기  (0) 2022.11.09
[AJAX] #1 AJAX의 이해  (0) 2022.11.09
  • 교재 검색
'⁂ AJAX/: 기본 익히기' 카테고리의 다른 글
  • [AJAX] #4 - AJAX로 사진 띄우기
  • [AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용)
  • [AJAX] #2 AJAX 기본 문법 뜯어보기
  • [AJAX] #1 AJAX의 이해
김갱환
김갱환
코딩의 코자도 모르는 이의 공부 기록장

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.