자스로 흉내내는 포털사이트 자동완성
페이지 정보
작성자 서방님 댓글 0건 조회 106회 작성일 06-09-14 16:03본문
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE TYPE="Text/CSS">
<!--
body, p, br, div, td, input {
font:9pt 굴림,굴림체,돋움,돋움체;
}
form {
padding:0px; margin:0px; display:inline;
}
.en8 {
font:8pt Verdana,Tahoma,굴림;
}
.fele {
height:20px; border:1px solid black;
}
#kwd_box {
width:186px; height:255px; cursor:default; visibility:hidden; z-index:1; max-height:255px;
}
-->
</STYLE>
<SCRIPT LANGUAGE='JavaScript' TYPE='Text/JavaScript'>
<!--
var IE = (navigator.userAgent.indexOf('MSIE') != -1) ? true : false; // 그냥 IE 체크 --ㅋ
var kwd_ar = new Array( // php/asp 등등 쿼리 날려서 불러와도 됨.
'abcde',
'가',
'가가',
'가가가 ㅁㅁㅁ asdf',
'가나나',
'가나다',
'가다다 ㄷㄷㄷ asdf',
'가다라',
'가다랭이',
'가라마',
'가마바',
'가바바',
'가사집',
'가사파',
'나',
'나나',
'나나나 ㄹㄹㄹ zeze',
'다',
'다다',
'다다다',
'마',
'마마',
'마마마',
'바바바',
'가사다',
'마아가린',
'무말랭이',
'바다',
'초딩',
'중딩',
'고딩',
'여자빤쓰 ㅎㅎㅎ',
'할매궁뎅이 ㅋㅋㅋ'
);
function click2search(sVal) // 클릭해서 바로 폼 전송시키기;;
{
var frm = document.myform;
frm._slb_inp.value = sVal;
//alert(frm._slb_inp.value);
frm.submit();
}
function autoComplete(act, sVal)
{
var testDiv = document.getElementById('kwd_box'); // 레이어 ID 정의
if(act == 'hide' || !sVal) // 레이어 숨기기
{
testDiv.innerHTML = '';
testDiv.style.visibility = 'hidden';
return;
}
else // 이게 진국이오!
{
if(act == 'show' && sVal.length) // 값이 있고 보이기일 때...
{
var boxMain = ''; // 박스 내용 정의 및 초기화
var kwd_cnt = 0;
// 특수문자 escape -.-
sVal = sVal.replace(/([~`@#$%^&*()|+=-_;:-,.'"\t\n\r<>!?/])/g, '\$1');
for(i = 0; i < kwd_ar.length; i++) // 배열만큼 죠낸 노가다;;
{
if(kwd_ar[i].match(eval('/^' + sVal + '{1,}/'))) // 일치하는 글자가 있으면
{
// 일치하는 항목 보여주고 글자 하나하나를 입흐게(?) 강조합시다.
match_kwd = kwd_ar[i].replace(eval('/(' + sVal + '){1,1}/gi'), '<font color=orange>$1</font>');
boxMain = boxMain
+ "<tr height=23 onMouseOver="this.style.backgroundColor='#f0f0f0'" onMouseOut="this.style.backgroundColor=''">"
+ "<td name='_slb' style='cursor:pointer;' title='" + kwd_ar[i] + "' onClick="click2search(this.getAttribute('title'))" nowrap>"
+ "<div name='_slb' style='width:145px;height:12px;overflow:hidden;'> " + match_kwd + "</div></td></tr>n";
kwd_cnt++;
}
}
divH = (kwd_cnt > 10) ? 230 : (kwd_cnt*23); // 스크롤바 조절용 DIV 높이 계산 (10개 이상 무조건 230px, 그 이하는 곱하기 23px)
var boxHead = "<table width=100% bgcolor=white cellpadding=0 cellspacing=0 style='border:1px solid black;'>"
+ "<tr height=21 bgcolor=gray><td name='_slb'> <font color=white class=en8><b name='_slb'>Matching List</b></font></td>"
+ "</tr><tr height=2 bgcolor=black><td></td></tr><tr><td>"
+ "<div name='_slb' style='width:100%;height:" + divH + "px;overflow-x:hidden;overflow-y:auto;'><table width=100% cellpadding=0 cellspacing=0>"
var boxFoot = "</table></div></td></tr></table>";
if(kwd_cnt) // 노가다 끝낸 결과가 하나 이상 있으면 show
{
testDiv.innerHTML = boxHead + boxMain + boxFoot;
testDiv.style.visibility = 'visible';
}
else autoComplete('hide'); // 아님 들어가 있어~~~
}
}
}
function hide_ctrl(e) // 다른 곳 클릭하면 레이어 안보이게...
{
if(!e) var e = window.event;
var srcEle = (IE) ? event.srcElement : e.target;
if(!srcEle.name || srcEle.name.indexOf('_slb') == -1) autoComplete('hide');
}
//-->
</SCRIPT>
<BODY>
<!-- Windows 기본 자동완성 기능 해제 (autocomplete=off) -->
<form name=myform autocomplete=off>
<input type=text name='_slb_inp' class=fele onKeyUp="autoComplete('show',this.value)" onMouseDown="autoComplete('show',this.value)">
<input type=submit class=fele value=' 전 송 '>
</form>
<div id='kwd_box'></div>
<SCRIPT LANGUAGE='JavaScript' TYPE='Text/JavaScript'>
<!--
// IE와 FF 구분해서 이벤트 첨부
if(IE) document.body.attachEvent('onmousedown', hide_ctrl);
else document.body.addEventListener('mousedown', hide_ctrl, false);
//-->
</SCRIPT>
</BODY>
</HTML>
=====================================================
이번엔 아예 자스로 네x버 같은 사이트의 자동완성을 흉내내어 봤습니다.
따라서 `무늬만 자동완성` 기능이 되겠습니다. ㄳ
제대로 구현된 실제 기술이 아니기 때문에 일단 어설픕니다.
버그 테스트도 그다지 제대로 안됐고요;; 역시나
"
제가 초보이고 무지해서 불필요한 소스도 많고 간단히 구현할 수 있는 걸 어렵사리
구현한 것도 있을 것이며[...] 어쩌구 저쩌구 중얼중얼 궁시렁 궁시렁... ㅠ
...해서 욕을 먹더라도 소스 최적화나 간략화 등등을 달아주시면 달게 받겠습니다.(__)
덧붙여서 IE는 물론이고 파폭에서도 문제 없습니다. <- 테스트 안해봤습니다. ㄳ
댓글목록
등록된 댓글이 없습니다.
