https://www.10x10.co.kr/lib/js/SearchAutoComplete_vuebuild.js

1/*
2#######################################################
3	History	:  2008.12.22 허진원 생성
4	           2012.03.14 스크립트 수정/이전
5	Description : 검색어 자동완성 Java Script
6#######################################################
7*/
8
9var NowNo=-1;		// 자동완성 결과선택 번호
10var timer = null;
11
12// 검색 실행
13function fnTopSearch(frmnm,frmval){
14	var frm = document.searchForm;
15	var chkTvs = frm.tvsTxt.value==frmval;
16
17	frmnm.value = frmval;
18	
19	if(frm.extUrl.value!=""&&chkTvs) {
20		self.location.href=frm.extUrl.value;
21	} else {
22		frm.cpg.value=1;
23		if (frm.rect.value.length<=0){
24			alert('검색어를 입력해 주세요');
25			frm.sTtxt.focus();
26			return;
27		} else {
28			frm.tvsTxt.value="";
29			frm.submit();
30		}
31	}
32}
33
34// 입력창 키처리
35function fnKeyInput(ek) {
36	var atl = document.getElementById("atl");
37	switch(ek) {
38		case 38:
39			// 방향키:위
40			if(atl && atl.style.display!="none"){
41				var prevElement = document.getElementById("rstNo" + (NowNo-1));
42				if(prevElement) {
43					if(NowNo>=0) {
44						var currentElement = document.getElementById("rstNo" + NowNo);
45						if(currentElement) currentElement.classList.remove("activate");
46					}
47					NowNo--;
48					prevElement.classList.add("activate");
49					prevElement.focus();
50					document.searchForm.sTtxt.focus();
51					selectText(prevElement.textContent);
52				}
53			}
54			break;
55		case 40:
56			// 방향키:아래
57			if(atl && atl.style.display!="none"){
58				var nextElement = document.getElementById("rstNo" + (NowNo+1));
59				if(nextElement) {
60					if(NowNo>=0) {
61						var currentElement = document.getElementById("rstNo" + NowNo);
62						if(currentElement) currentElement.classList.remove("activate");
63					}
64					NowNo++;
65					nextElement.classList.add("activate");
66					nextElement.focus();
67					document.searchForm.sTtxt.focus();
68					selectText(nextElement.textContent);
69				}
70			}
71			break;
72		default:
73			if(timer) {
74				clearTimeout(timer);
75			}
76			timer = setTimeout(function() {
77				fnAutoCompLayer('on');				
78			}, 300);
79			NowNo = -1;			
80			break;
81	}
82}
83
84var strCont, strHead, strFoot;
85
86//레이어 머릿글
87strHead = "<ul>";
88//레이어 꼬릿글
89strFoot = "</ul>";
90
91//자동완성 실행
92function fnAutoCompLayer(key) {
93	var frm = document.searchForm;
94	var atl = document.getElementById("atl");
95
96	// 자동완성 레이어 내용 작성
97	if(!frm.sTtxt.value) {
98		strCont = strHead + "<li>검색어 자동완성 기능을 <b>사용하고</b> 계십니다.</li>" + strFoot;
99	} else {
100		// XML로딩
101		var xhr = new XMLHttpRequest();
102		xhr.open("GET", "/search/act_autoComplete.asp?str=" + encodeURI(frm.sTtxt.value), true);
103		xhr.timeout = 5000;
104		
105		if(xhr.overrideMimeType) {
106			xhr.overrideMimeType("text/xml;charset=UTF-8");
107		}
108		
109		xhr.onload = function() {
110			if(xhr.status === 200) {
111				var xml = xhr.responseXML;
112				var items = xml.querySelectorAll("categoryPage item");
113				
114				if(items.length > 0) {
115					var result = "";
116				
117					// item노드 Loop
118					items.forEach(function(item) {
119						var no = item.querySelector("No").textContent;
120						var word = item.querySelector("Word").textContent;
121						var seed = item.querySelector("Seed").textContent;
122						var conv = item.querySelector("Conv").textContent;
123						
124						result += "<li id='rstNo" + no + "' onClick='selectText(this.innerText);fnSACLayerOnOff(false);fnTopSearch(document.searchForm.rect,document.getElementById(\"sTtxt\").value);' style='cursor:pointer'>";
125						result += convTxtColor(word, seed, conv);
126						result += "</li>";
127					});
128					strCont = strHead + result + strFoot;
129
130					//자동완성 레이어 출력
131					if(atl) atl.innerHTML = strCont;
132					if(strCont!=(strHead+strFoot)) fnSACLayerOnOff(true);
133					else fnSACLayerOnOff(false);
134					NowNo = -1;
135				}
136			}
137		};
138		
139		xhr.onerror = function() {
140			// error handling
141		};
142		
143		xhr.send();
144	}
145
146	//자동완성 레이어 닫기
147	var atlDisplay = atl ? window.getComputedStyle(atl).display : "none";
148	if(!((atlDisplay=="none"||key=="on")&&(frm.sTtxt.value||key=="off"))) {
149		if(atl) atl.innerHTML = '';
150		fnSACLayerOnOff(false);
151	}
152}
153
154//레이어on/off
155function fnSACLayerOnOff(sw) {
156	var atl = document.getElementById("atl");
157	if(!atl) return;
158	
159	if(sw) {
160		if(atl.innerHTML) {
161			atl.style.display = "block";
162		}
163	} else {
164		atl.style.display = "none";
165	}
166}
167
168//시간차 레이어 닫기
169var hide_SACLayer_started = false;
170function HideSACLayer() {
171    hide_SACLayer_started = true;
172    setTimeout("DoHideSACLayer()", 200);

173}
174function DoHideSACLayer() {
175    if (hide_SACLayer_started == true) {
176	    fnSACLayerOnOff(false);
177	}
178	hide_SACLayer_started = false;
179}
180function CancelHideSACLayer() {
181    hide_SACLayer_started = false;
182}
183
184//결과에서 검색창으로..
185function selectText(txt) {
186	document.searchForm.sTtxt.value=txt;
187}
188
189//선택 문자 색전환
190function convTxtColor(sO,sS,sC) {
191    //4.3
192    //var v = sO.replace(sS,"<b>"+sS+"</b>");
193	//return v;
194	    
195	if(sC=="null") {
196		return sO.replace(sS,"<b>"+sS+"</b>");
197	} else {
198		return sO.replace(sC,"<b>"+sC+"</b>");
199	}
200}