Ajax - 검색시 제시어 기능 만들기

Dev/JS & Jquery

Ajax - 검색시 제시어 기능 만들기

창문닦이 2019. 4. 2. 18:40

일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 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번 반복
}
}
%>

③ 검색어 작성 화면

검색키가 입력되고 새로고침이 되지 않더라도 자동으로 키워드들이 조회되고 선택할경우 하이퍼링크로 연결되도록 완성하였다.

저작자표시 비영리 변경금지

'Dev > JS & Jquery' 카테고리의 다른 글

Ajax - 자바스크립트 클래스 만들기 (0)	2019.04.03
Ajax - Document Object Model과 XML (0)	2019.04.03
Ajax - get/post방식,Id유효성검사,서버/클라이언트 시간확인,CSV형식 데이터 읽기 (0)	2019.04.01
Ajax - 텍스트 데이터 전송받기 (1)	2019.03.29
JQuery 셋팅 및 예제 (0)	2019.03.29

현재글Ajax - 검색시 제시어 기능 만들기

창문을 열심히 닦아요