반응형
자세한 설명이 필요있겠는가.. 샘플을 원하는 것 다 알고 있네..
여기..
방식을 설명하자면, Google Custom Search JSON API를 JS 로드 방식으로 구현하였다.
검색을 하였을 경우 JS를 동적으로 로드하여 검색하고 결과를 가져온다.
하루 100개 제한이므로, 리스트에 10개 항목씩 보여지고, 페이지는 5페이지씩 노출된다.
기본적으로 API에서는 pervPage, nextPage만 제공되므로, 페이지 이동이 자유롭도록 페이지네이션을 구현하였다.
기본적인 디자인은 음따...............
(API 호출은 REST API형식을 따라서 하는게 가장 깔끔할 듯 하다..)
<%--
Created by IntelliJ IDEA.
User: mitw
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<body>
<h3>Mitw Google Custom Search Api</h3>
<%--최대 100개까지만 제공한다;;;
https://developers.google.com/custom-search/v1/reference/rest/v1/cse.siterestrict/list?hl=ko
사이트 제한 --
https://www.googleapis.com/customsearch/v1/siterestrict
사이트 전체 --
https://customsearch.googleapis.com/customsearch/v1
--%>
<c:if test="${not empty param.search}">
<script>
const search = searchParam("search");
let page = searchParam("page");
if(!page){page = 1;}
const count = searchParam("count");
const startIndex = (page-1) * count + 1;
jsOverrideSetter('https://customsearch.googleapis.com/customsearch/v1', '?key=[[[[나의 Key값]]]]&cs=[[[[나의 엔진아이디]]]]&q='+search+'&sort=date:d:s&start='+startIndex+'&callback=fn_callback');
function jsOverrideSetter(js_, qString_){
const sce = document.querySelector('script[src="' + js_ + qString_ + '"]');
if (!sce) {
const _d_ = document, _p_ = _d_.createElement('script');
_p_.type = 'text/javascript';
_p_.charset = 'utf-8';
_p_.async = true;
_p_.src = js_+qString_;
const _s_ = _d_.getElementsByTagName('script')[0];
_s_.parentNode.insertBefore(_p_, _s_);
}
}
function searchParam(key){
return new URLSearchParams(location.search).get(key);
}
function fn_customSearchPaging(nextPageOfQueries){
const pagePer = 5, pageData = nextPageOfQueries[0], pageCount = pageData.count,
nowPage = page, myPageArea = Math.floor( nowPage / pagePer) + (nowPage%pagePer===0?0:1);
let pageHtml = '';
if(myPageArea > 1) {pageHtml += '<span style="margin-right: 20px"><a href="/test?search='+search+'&page='+(myPageArea-1)+'&count='+pageCount+'">이전</a></span>';}
if((((myPageArea-1)*pagePer)+pagePer) * pageCount <=100) {
for(let a=((myPageArea-1)*pagePer)+1;a<=((myPageArea-1)*pagePer)+pagePer;a++){
if(page == a) {
pageHtml += '<span style="color:red;margin-right: 20px">'+a+'</span>';
} else {
pageHtml += '<span style="margin-right: 20px"><a href="/test?search='+search+'&page='+a+'&count='+pageCount+'">'+a+'</a></span>';
}
}
}
if( (((myPageArea-1)*pagePer)+pagePer) * pageCount < 100) {
pageHtml += '<span style="margin-right: 20px"><a href="/test?search='+search+'&page='+(((myPageArea-1)*pagePer)+1+pagePer)+'&count='+pageCount+'">다음</a></span>';
}
$('#pageNation').html(pageHtml);
}
function fn_callback(response) {
console.log(response);
if(response.items.length && response.items.length > 0) {
$('#content').html(
response.items.map(
v=>`<li><p>제목 : `+v.title+`</p><div>설명 : `+v.snippet+`</div><div>출처 : `+v.displayLink+`</div><div>링크 : ` + v.formattedUrl + `</div></li>`
).join('')
);
fn_customSearchPaging(response.queries.nextPage);
}
}
</script>
</c:if>
<form name="frm" method="get" action="/index.jsp">
<label>
<input name="search" value="${param.search}" placeholder="검색어를 입력해주세요."/>
</label>
<button type="submit">검색</button>
</form>
<div><ul id="content"></ul></div>
<div id="pageNation"></div>
</body>
</html>
위를 이용하면 다음과 같은 화면을 얻을 수 있다. 너무 디자인이 없어서 죄송하다.........
아래쪽에 보시면 페이지네이션에도 디자인이 없다...ㅋ
....
여러분들 디자인이 없지요? 오늘 수업 요기까집니다. 하하하
'Web' 카테고리의 다른 글
| Google Programmable Search Engine는 퍼블리싱이 어디까지 커스텀될까? (0) | 2023.09.15 |
|---|---|
| video 태그에서 썸네일이 나오지 않는 증상 (feat. 아이폰(ios) 계열에서만) (0) | 2023.09.14 |
| 구글 커스텀 서치 (Google Custom Search JSON API, Custom Search Site Restricted JSON API ) 설정하기. (0) | 2023.09.14 |
| Javascript- html2canvas (현재 웹화면을 스크린샷 찍어서 서버로?) (feat. java spring) (0) | 2023.07.12 |
| javascript - F12, 마우스우클릭, Ctrl+Shift+I 방어 (0) | 2023.05.22 |
댓글