300x250
반응형
일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 DB에 누적시켜 저장시킨 뒤 검색빈도가 높은 목록을 정리해서 출력해준다.
이 제시어 기능을 구현해보자.
① 검색어를 입력할 페이지 - suggestClient.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!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=UTF-8">
<title>제시어</title>
<style type="text/css">
.suggest{
display: none;
position: absolute;
left:11px;
top:131px;
}
</style>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function sendKeyword(){
var userKeyword = document.myForm.userKeyword.value;
if(userKeyword==""){
hide();//검색창이 비워져있으면 숨김
return;
}
var params = "userKeyword="+userKeyword;
sendRequest("suggestClient_ok.jsp", params, displaySuggest, "POST");
}
function displaySuggest(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){//서버응답 정상처리인 경우
var resultText = httpRequest.responseText;//resposne로 넘어온 텍스트 할당
//alert(resultText);
//5|abc,ajax,abc마트
var resultArray = resultText.split("|"); //{5, {abc,ajax,abc} } 로 나눔
var count = parseInt(resultArray[0]);//5
var keywordList = null;
if(count>0){
keywordList = resultArray[1].split(",");
var html = "";
for(var i=0;i<keywordList.length;i++){
html += "<a href=\"javascript:select('" +
keywordList[i] + "');\">" +
keywordList[i] + "</a><br/>";
//<a href="javascript:select('ajax');">ajax</a><br/>
}
var suggestListDiv = document.getElementById("suggestListDiv");
suggestListDiv.innerHTML = html;
show();
}else{
//count==0
hide();
}
}else{
//status!=200
hide();
}
}else{
//readyState!=4
hide();
}
}//function..end
//사용자가 제시어중에서 클릭한 키워드
function select(selectKeyword){
//클릭한 제시어를 inputbox에 넣어줌
document.myForm.userKeyword.value = selectKeyword;
hide();//다른 제시어 감춤
}
function show(){
var suggestDiv = document.getElementById("suggestDiv");
suggestDiv.style.display = "block";
}
function hide(){
var suggestDiv = document.getElementById("suggestDiv");
suggestDiv.style.display = "none";
}
//처음 DOM이 로드되었을때 보이지 않도록
window.onload = function(){
hide();
}
</script>
</head>
<body>
<h1>제시어</h1>
<hr/>
<br/>
<form action="" name="myForm">
<input type="text" name="userKeyword" onkeyup="sendKeyword();"/>
<input type="button" value="검색"/>
<div id="suggestDiv" class="suggest">
<div id="suggestListDiv"></div>
</div>
</form>
</body>
</html>② 제시어를 응답할 페이지 - suggestClient_ok.jsp
<%@page import="java.util.Iterator"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Collections"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%!
//데이터베이스에 등록된 인기 연관 검색어라는 가정(실제로 쓸땐 DB연동해서 사용)
String[] keywords = { "ajax", "Ajax", "Ajax 실전 프로그래밍",
"AZA", "AZERA","자수","자전거","자바 프로그래밍",
"자바 서버 페이지", "자바캔" , "ABC마트", "APPLE" };
//사용자가 입력한 단어의 연관 제시어 검색하여 리스트 반환
public List<String> search(String userKeyword){
if(userKeyword==null||userKeyword.equals("")){
return null;
//return Collections.EMPTY_LIST; 내장변수
}
//userKeyword = userKeyword.toUpperCase();//대문자검사
List<String> lists = new ArrayList<String>();
for(int i=0;i<keywords.length;i++){
if(keywords[i].startsWith(userKeyword)){
lists.add(keywords[i]);
}
}
return lists;
}
%>
<%
//파라미터를 읽어온 뒤 연관제시어 찾기
String userKeyword = request.getParameter("userKeyword");
List<String> keywordList = search(userKeyword);
//키워드갯수와 키워드단어들을 | 로 구분
out.print(keywordList.size());
out.print("|");
//출력형식 5 | abc,ajax,abc마트
Iterator<String> it = keywordList.iterator();
while(it.hasNext()){
String value = (String)it.next();
out.print(value);
if(keywordList.size()-1>0){
out.print(",");//마지막단어에는 쉼표가 찍히지 않도록 size()-1번 반복
}
}
%>
③ 검색어 작성 화면
검색키가 입력되고 새로고침이 되지 않더라도 자동으로 키워드들이 조회되고 선택할경우 하이퍼링크로 연결되도록 완성하였다.
출처 : https://wiper2019.tistory.com/132
Ajax - 검색시 제시어 기능 만들기
일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 DB에 누적시켜 저장시킨 뒤 검색빈도가 높은 목록을 정리해서 출력해준다. 이 제시어 기능을 구현해보자. ① 검색어를 입력할 페이지 -
wiper2019.tistory.com
300x250
반응형