Rooroorooroo [Issues & Opinions]: 자작한 블로거 검색 시스템(HTML, jQuery 필요)140326

구글 Blogger에서만 작동한다. 페이지 체제이며, 일반 검색(인덱스/아카이브), 검색어(쿼리), 레이블 3가지 검색이 있다.
인터넷에 많은 네비게이션 위젯 코드를 분석해 이들이 updated 파라미터와 summary?alt=json-in-script 형식의 피드를 사용함을 알아내어 응용하였다.

주의사항:
1. 다음 코드에서 굵게 표시한 부분을 수정해서 사용한다.
2. jQuery를 설치해야 한다.

ver.2

ver.1

-140326 업데이트(최신 ver.2)-

<style>

#s_w{

position:relative;

line-height:1.6;

}

#s_w, #s_w input, #s_w select, #s_w button{

font-size:18px;

}

#s_w2{

padding:5px 10px;

border:1px outset #999;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFZmEClHVoTIrdhmdmBVA795ghrDpA3ZZEQfV0uFjAUJUMh8kW-vKz4WbJz8qgx9FatcH0h9cbS2yvJCspr9F5KGVjysEMf2oE2PTo-zLpwL4g3o8zxJZ1FcMDaqA14c2zCN0H4euUKE/s1600/ewafawef.png);

background-size:1px 100%;

}

#s_b, #s_b2{

padding:2px 10px;

}

#s_b, #s_b2, .s_ps{

border:1px outset #777;

background-color:#f9fafc;

color:#1c447b;

font-weight:bold;

}

#s_pm, #s_pp{

padding:0 5px;

border:1px outset #777;

background-color:#fff;

}

.s_ps{

display:inline-block;

cursor:pointer;

text-decoration:none;

padding:0 10px;

}

#s_pm2, #s_pm3, #s_pm4{

display:none;

}

#s_b:hover, #s_b2:hover, #s_pm:hover, #s_pp:hover, .s_ps:hover{

background-color:#ddd;

}

#s_i{

font-weight:bold;

}

#s_qw,#s_lw{

display:none;

}

#s_f,#s_f2{

display:inline;

}

#s_f input, #s_f2 input{

zoom: 1.8;

vertical-align: middle;

}

#s_p{

font-family:monospace;

text-align:center;

}

#s_p,#s_q,#s_l{

border:1px solid;

}

#s_pw{

text-align:center;

display:inline-block;

line-height:1;

color:#fff;

}

#s_pw>span{

font-size:14px;

}

#s_pr{

font-size:15px;

font-weight:bold;

color:#666;

}

</style>

</form>

</form>

</span>

var search_stc;

var sf_type;

var ntoi3;

var parsesearch1;

var parsesearch1s1;

var parsesearch3;

var parsesearch3s1;

var parseprv_show;

var parseprv1;

var parseprv1s1;

var parseprv3;

var parseprv3s1;

var search_l;

var search_pr;

var lj=[

{"n":"레이블1"},

{"n":"레이블2"},

......

{"n":"마지막 레이블"}

];

search_stc=function(p){

p=parseInt(p);

if(p>1){$('#s_pm2').css('display','inline-block').html((p-1));}else{$('#s_pm2').css('display','none');}

if(p>2){$('#s_pm3').css('display','inline-block').html((p-2));}else{$('#s_pm3').css('display','none');}

if(p>3){$('#s_pm4').css('display','inline-block').html((p-3));}else{$('#s_pm4').css('display','none');}

$('#s_pp2').html((p+1));

$('#s_pp3').html((p+2));

$('#s_pp4').html((p+3));

};

$('#s_p')[0].onkeyup=function(e){

var v=parseInt(this.value);

if(e.which==38){

v++; this.value=v;

}else if(e.which==40&&v>1){

v--; this.value=v;

}

search_stc(this.value);

};

$('#s_pm')[0].onclick=function(){

var e=$('#s_p');

var v=e.val();

v=parseInt(v);

if(v>1){e.val(v-1); search_stc(v-1);}

};

$('#s_pp')[0].onclick=function(){

var e=$('#s_p');

var v=e.val();

v=parseInt(v);

e.val(v+1);

search_stc(v+1);

};

sf_type=function(t,p){

var e2=$('#s_f>label');

if(t==0){

if(p){

e2.eq(0).css('font-weight','bold');

}else{

e2.eq(0).css('font-weight','');

}

}else if(t==1){

if(p){

$('#s_qw').css('display','inline');

e2.eq(1).css('font-weight','bold');

}else{

$('#s_qw').css('display','none');

e2.eq(1).css('font-weight','');

}

}else if(t==2){

if(p){

$('#s_lw').css('display','inline');

e2.eq(2).css('font-weight','bold');

}else{

$('#s_lw').css('display','none');

e2.eq(2).css('font-weight','');

}

};

sf_type(0,true);

$('#s_f')[0].onclick=function(){

var e=$('#s_f>input');

sf_type(0,e[0].checked);

sf_type(1,e[1].checked);

sf_type(2,e[2].checked);

};

ntoi3=function(n){ var c=-1; var e=$('#s_l')[0].options; for(var i=0;i!=e.length;i++){ if(n==e[i].value){c=i;} } return c; };

(function(){

var s_l=$('#s_l');

for(var i=0;i<lj.length;i++){

var temp_tl=true;

if(lj[i].t==-1){if(lj[i].l==false){temp_tl=false;}}

if(temp_tl){

var temp_op=ce('option');

temp_op.value=lj[i].n;

$(temp_op).html(lj[i].n);

s_l[0].appendChild(temp_op);

}

var h=window.location.href;

if(h.indexOf('p-type=')!=-1){

var pa=h.split('p-page=')[1].split('&')[0].split('#')[0];

pa=parseInt(pa);

$('#s_p').val(pa);

search_stc(pa);

var ty=h.split('p-type=')[1].substr(0,2);

var temp_sfo=$('#s_f>input');

if(ty=='in'){

temp_sfo[0].checked=true;

sf_type(0,true);

sf_type(1,false);

sf_type(2,false);

var mxpa=h.split('p-max=')[1].split('&')[0].split('#')[0];

$('#s_i').html('글목록 '+pa+'/'+mxpa+'<br/>');

}else if(ty=='qu'){

temp_sfo[1].checked=true;

sf_type(0,false);

sf_type(1,true);

sf_type(2,false);

$('#s_qw').css('display','inline');

var kw=h.split('q=')[1].split('&')[0].split('#')[0];

$('#s_q').val(decodeURIComponent(kw));

var ord=h.split('by-date=')[1].split('&')[0].split('#')[0];

if(ord=='false'){

$('#s_f2>input')[0].checked=true;

}else{

$('#s_f2>input')[1].checked=true;

}

$('#s_i').html("'"+decodeURIComponent(kw)+"' 검색결과 "+pa+"p"+'<br/>');

}else if(ty=='lb'){

temp_sfo[2].checked=true;

sf_type(0,false);

sf_type(1,false);

sf_type(2,true);

$('#s_lw').css('display','inline');

var clb=h.split('/search/label/')[1].split('?')[0].split('#')[0];

$('#s_l')[0].selectedIndex=ntoi3(decodeURIComponent(clb));

var mxpa=h.split('p-max=')[1].split('&')[0].split('#')[0];

$('#s_i').html("'"+decodeURIComponent(clb)+"' "+pa+"/"+mxpa+'<br/>');

}

})();

parsesearch1=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt(a);

var st=f.feed.openSearch$startIndex.$t;

st=parseInt(st);

if(a<=st){alert("페이지를 초과하였습니다.");return;}

var item=f.feed.entry[0].published.$t.split('.');

item=item[0]+(item[1].substr(3,6));

var pmax=parseInt((a-1)/10)+1;

window.location.replace('/search/?updated-max='+encodeURIComponent(item)+'&max-results=10&p-page='+(st/10+1)+'&p-max='+pmax+'&p-type=in');

};

parsesearch1s1=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt((a-1)/10)+1;

window.location.replace('/search/?max-results=10&p-page=1&p-max='+a+'&p-type=in');

};

parsesearch3=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt(a);

var st=f.feed.openSearch$startIndex.$t;

st=parseInt(st);

if(a<=st){alert("페이지를 초과하였습니다.");return;}

var item=f.feed.entry[0].published.$t.split('.');

item=item[0]+(item[1].substr(3,6));

var pmax=parseInt((a-1)/10)+1;

window.location.replace('/search/label/'+l_n+'?updated-max='+encodeURIComponent(item)+'&max-results=10&p-page='+(st/10+1)+'&p-max='+(parseInt((a-1)/10)+1)+'&p-type=lb');

};

parsesearch3s1=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt((a-1)/10)+1;

window.location.replace('/search/label/'+l_n+'?max-results=10&p-page=1&p-max='+a+'&p-type=lb');

};

parseprv_show=function(i){

var e=$('#s_pr')[0];

var s="";

$(e).html("");

var ee=ce('br');

e.appendChild(ee);

for(var ii=0;(ii<i.length)&&(ii<3);ii++){

if(i[ii].media$thumbnail){

ee=ce('img');

ee.src=i[ii].media$thumbnail.url;

$(ee).css({

'vertical-align':'middle',

'width':'72px',

'height':'72px'

});

e.appendChild(ee);

}else{

ee=ce('span');

$(ee).css({

'display':'inline-block',

'width':'72',

'height':'72',

'background-color':'#fff',

'text-align':'center',

'vertical-align':'middle'

});

$(ee).html("사진<br/>없음");

e.appendChild(ee);

}

ee=document.createTextNode(i[ii].title.$t);

e.appendChild(ee);

if((ii+1<i.length)&&(ii+1<3)){

e.appendChild(ce('br'));

}

};

parseprv1=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt(a);

var st=f.feed.openSearch$startIndex.$t;

st=parseInt(st);

if(a<st){alert("페이지를 초과하였습니다.");return;}

parseprv_show(f.feed.entry);

};

parseprv1s1=function(f){

parseprv_show(f.feed.entry);

};

parseprv3=function(f){

var a=f.feed.openSearch$totalResults.$t;

a=parseInt(a);

var st=f.feed.openSearch$startIndex.$t;

st=parseInt(st);

if(a<st){alert("페이지를 초과하였습니다.");return;}

parseprv_show(f.feed.entry);

};

parseprv3s1=function(f){

parseprv_show(f.feed.entry);

};

search_l=function(page){

var e=$('#s_f>input');

if(page<1){alert("페이지는 1 이상이어야 합니다.");return;}

if(e[0].checked){

var s=ce('script');

s.async=true;

var si=((page-1)*10);

if(si==0){

s.src='/feeds/posts/summary?alt=json-in-script&callback=parsesearch1s1&max-results=0';

document.body.appendChild(s);return;

}

s.src='/feeds/posts/summary?alt=json-in-script&callback=parsesearch1&start-index='+si+'&max-results=1';

document.body.appendChild(s);

}else if(e[1].checked){

var qu=$('#s_q').val();

var e=$('#s_f2>input')[0].checked;

if(e){e="false";}else{e="true";}

qu="/search/?q="+encodeURIComponent(qu)+"&max-results=10&by-date="+e+"&start="+((page-1)*10)+"&p-page="+page+"&p-type=qu";

window.location.replace(qu);

}else{

var s=ce('script');

s.async=true;

var si=((page-1)*10);

l_n=$('#s_l');

l_n=encodeURIComponent(l_n[0].options[l_n[0].selectedIndex].value);

if(si==0){

s.src='/feeds/posts/summary/-/'+l_n+'?alt=json-in-script&callback=parsesearch3s1&max-results=0';

document.body.appendChild(s);return;

}

s.src='/feeds/posts/summary/-/'+l_n+'?alt=json-in-script&callback=parsesearch3&start-index='+si+'&max-results=1';

document.body.appendChild(s);

}

};

search_pr=function(page){

var e=$('#s_f>input');

if(page<1){alert("페이지는 1 이상이어야 합니다.");return;}

if(e[0].checked){

var s=ce('script');

s.async=true;

var si=((page-1)*10);

if(si==0){

s.src='/feeds/posts/summary?alt=json-in-script&callback=parseprv1s1&max-results=3';

document.body.appendChild(s);return;

}

s.src='/feeds/posts/summary?alt=json-in-script&callback=parseprv1&start-index='+(si+1)+'&max-results=3';

document.body.appendChild(s);

}else if(e[1].checked){

alert("미리보기가 불가능합니다.");return;

}else{

var s=ce('script');

s.async=true;

var si=((page-1)*10);

l_n=$('#s_l');

l_n=encodeURIComponent(l_n[0].options[l_n[0].selectedIndex].value);

if(si==0){

s.src='/feeds/posts/summary/-/'+l_n+'?alt=json-in-script&callback=parseprv3s1&max-results=3';

document.body.appendChild(s);return;

}

s.src='/feeds/posts/summary/-/'+l_n+'?alt=json-in-script&callback=parseprv3&start-index='+(si+1)+'&max-results=3';

document.body.appendChild(s);

}

};

$('#s_b')[0].onclick=function(){