마카로닉스

1047 No

jsp+mysql+ajax를 이용헤서 자동완성 검색기능을 구현하고싶습니다.

2017-09-15 22:18:30 By 쥬시온 0 1434 댓글수 5 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

톰캣과 mysql을 사용해서 club의 리스트 불러오는거랑 검색기능은 하나의 jsp에 전부 구현을 하였습니다.

여기에 ajax를 추가하여 자동완성 기능을 구현하고싶은데 감이오지않네요ㅠㅠ 도움 주시면 감사하겠습니다.

<%@ page import="java.sql.*"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page  import="java.util.ArrayList"%>
<% request.setCharacterEncoding("euc-kr"); %>
 <%@ page import="java.sql.*,java.text.SimpleDateFormat,java.util.Date"%>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<script language="JavaScript">
function Check()
{
 if (Form.autocomplete.value.length <1){
  alert("검색어를 입력하세요.");
  From.autocomplete.focus();
  return false;
  }
 }
</script>
</head>
<body>
<%
int a=0;
  String dbUrl = "jdbc:mysql://localhost:3306/test";
  Class.forName("com.mysql.jdbc.Driver");
  String key = request.getParameter("key");  //
  String autocomplete = request.getParameter("autocomplete");
  String strSQL = "";
  
  try {  
   Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "testuser","kcms"); //db연결
   Statement stmt = conn.createStatement(); //statement타입의 객체 생성  
   int total = 0;
   String SQL = "select count(*) from club";  //db내의 자료개수를 찾는 sql문
   ResultSet rs = stmt.executeQuery(SQL); //db실행 
   if(rs.next()){    //rs.next()의 반환값은 true or false입니다. 찾는결과가 있으면 true
    total = rs.getInt(1); // SELECT문의 첫번째 필드 여기선 COUNT(*)
   }



   rs.close(); //rs객체 반환
   out.print("총 동아리 수 : " + total + "개"); //게시물 수 출력
   if (key==null || autocomplete==null){   //key값이 없으면 모든 리스트 출력
    strSQL = "SELECT c.num as num, c.club_name as club_name, c.lead_name as lead_name, "
     +"r.room_num as room_num, m.major_name as major_name, a.area_name as area_name "
     +"FROM club c JOIN room r ON c.room_num = r.num "
     +"JOIN area a ON c.area_num = a.num "
     +"LEFT JOIN major m ON c.major_num = m.num "
     +"ORDER BY c.num ASC"; // club 테이블에 있는 값을 가져오되 Num을 기준으로 오름차순정렬



   }else{         //key값이 있으면 key값에 해당되는 리스트 출력
    strSQL ="SELECT c.num as num, c.club_name as club_name, c.lead_name as lead_name, "
       +"r.room_num as room_num, m.major_name as major_name, a.area_name as area_name "
       +"FROM club c JOIN room r ON c.room_num = r.num "
       +"JOIN area a ON c.area_num = a.num "
       +"LEFT JOIN major m ON c.major_num = m.num WHERE "
       + key + " like '%" + autocomplete + "%'"
       +" ORDER BY c.num ASC"; //// club 테이블에 있는 값을 가져오되 Num을 기준으로 오름차순정렬
   }
   rs = stmt.executeQuery(strSQL); //db실행
   
%>

<div id="headLeft">
<font size="6" color="black">동아리 검색하기</font>
</div>
<div id="headRight">
<h2 align="right">  <a href="Main.jsp">메인</a></h2>
</div> 
<FORM Name='Form' Method='POST' Action='Search.jsp' OnSubmit='return Check()'>
     <select name='key' style="background-color:cccccc;">
    <option value='club_name' selected><font size='2'>
                                                        이름</font></option>
    <option value='major_name'><font size='2'>
                                                        전공</font></option>
    <option value='area_name'><font size='2'>
                                                        분야</font></option>
    </select>
 <input type="text" size=20 name=autocomplete value= "">
<input align="right" type="submit" value="검색">
 </FORM>
  <!-- 71:post방식으로 다시 Search_form 페이지로 넘어감 72~80:필터 81:키워드입력창 82:검색버튼 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr height="50">
<td align="center" width="" >번호</td>
<td align="center" width="" >이름</td>
<td align="center" width="">회장</td>
<td align="center" width="">위치</td>
<td align="center" width="">전공</td>
<td align="center" width="">분야</td>
</tr>



<%
    if(total==0) {  //자료가 없다면
%>
    <tr align="center" bgcolor="#FFFFFF" height="30">
     <td colspan="6">등록된 글이 없습니다.</td>
    </tr>
<%
   } else {
    while(rs.next()){ //반복문으로 자료를 찾음. rs.next()는 다음라인으로 커서 이동
     int num = rs.getInt(1);
     String club_name = rs.getString(2);
     String lead_name = rs.getString(3);
     String room_num = rs.getString(4);
     String major_name = rs.getString(5);
     String area_name = rs.getString(6);



%>
<tr height="50" align="center">   



          <td align="center" ><%=num %> </td>
      <td align="center"><h3><a href="View.jsp"><%=club_name %></a></h3></td>
 <%-- <td align="center"><h3><a href="club<%=a%>.jsp"><%=club_name %></a></h3></td> --%>
   <td align="center"><%=lead_name %></td>
   <td align="center"><%=room_num %></td>
   <td align="center"><%=major_name %></td>
   <td align="center"><%=area_name %></td>
   <td>&nbsp;</td>
</tr>
 <tr height="1" bgcolor="#D2D2D2"><td colspan="6"></td></tr>
  <%
     }
    }
    rs.close(); //rs객체 반환
    stmt.close(); //stmt객체 반환
    conn.close(); //conn객체 반환
    } catch(SQLException e) {
     out.print(e.toString()); //에러가 날 경우 에러 출력
    }
  %>
  
 <tr height="1" bgcolor="#82B5DF"><td colspan="6" width="752"></td></tr>
 </table>
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td colspan="4" height="5">
   </td>
  </tr>
  <tr align="center">
 <!--   <td> <input type=button value="글쓰기"></td> -->
  </tr>
</table>
</body>
</html>

----------------------------

검색하려는 단어를 담는변수 이름을 autocomplete으로 사용하였구요 검색은 한단어 입력해도 됩니다.

어떤부분에 어떤 소스를 추가해야되는지 어떤 파일을 만들어야 하는지 등등

ajax를 사용해서 naver검색 화면 처럼 자동완성으로 뜨도록 알려주시면 감사하겠습니다.