개발자 Q&A

 

톰캣과 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검색 화면 처럼 자동완성으로 뜨도록 알려주시면 감사하겠습니다.

 

 

 

about author

PHRASE

Level 1  쥬시온

Do not kick against the pricks. (가시를 차지 말라. 쓸데없이 저항하여 상처입지 말라.)

댓글 ( 1)

댓글 남기기

작성

개발자 Q&A 목록    more