서버와 실시간으로 상호작용 하여 입력한 내용을 출력하도록 한다
출력 예시
viewpage
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>search</title>
<script src="../js/jquery-3.6.4.min.js"></script>
</head>
<body>
<h3>교재 검색</h3>
<form name="search" id="search">
<input type="text" name="keyword" id="keyword">
<input type="button" value="검색">
</form>
<div id="panel" style="display:none"></div>
<script>
//키를 누를때마다 서버랑 상호작용
$("#keyword").keyup(function(){
// alert("test");
if ($("#keyword").val()=="") {
//검색어가 존재하지 않으면
$("#panel").hide();//결과 출력하지 않음
}
// 1.keyword 값 가져오기
// let params=$("#keyword").val();
// alert(params);
//2.본문 폼안의 모든 컨트롤 요소를 가져오기
let params=$("#search").serialize();
//alert(params);
//keyword=java
$.post("searchProc.do",params,responseProc);
});
function responseProc(data) {
//alert(data);
//2＃AJAX,AJAX 실전 프로그래밍
if (data.length>0) { //응답 받은 내용이 있는지
let result=data.split("|"); //기호를 기준으로 문자열 분리
// alert(result[0]);
// 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>";
});
$("#panel").html(str);
$("#panel").show();
}else{
$("#panel").hide();
}
}
</script>
</body>
</html>controller
@RequestMapping("book/searchForm.do")
public String booksearch() {
return "book/searchTest";
}
@RequestMapping("book/searchProc.do")
@ResponseBody
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();
// System.out.println(message);
//응답 메세지-> 개수, 찾은 문자열, 찾은 문자열
// 3|자바, 자바 프로그래밍, 자바 안드로이드
int size=list.size();
if (size>0) {
message += size +"|";
for(int i=0;i<size;i++) {
String title=list.get(i);
message += title;
if (i<size-1) {
message +=",";
//마지막에는 ,를 붙이지 않음
}
}
}
}
//System.out.println(message);
return message;
}
public ArrayList<String> search(String keyword) {
//검색하고자 하는 문자열
// where title like'% %'
String[] keywords= {"Ajax", "Ajax 실전 프로그래밍", "자바",
"웹프로그래밍", "웹마스터", "자바 프로그래밍",
"자전거", "자라", "JSP 프로그래밍",
"자바 안드로이드"};
//keyword를 배열 첫글자부터 비교
// 같으면 arraylist에 저장
ArrayList<String> list= new ArrayList<>();
for(String word:keywords) {
word=word.toUpperCase();
if (word.startsWith(keyword.toUpperCase())) {
list.add(word);
}
}
return list;
}
