검색어 입력하고 엔터키 치면 바로 검색되는 거?
본문
그거 어떤 소스때문에 그렇게 되는 건가요?
그누보드 전체검색이나 게시판에서 검색어 입력하고 엔터키 치면 바로 검색되던데..
마우스로 검색 버튼 누를 필요 없이요...
답변 3
form 태그안에 submit 버튼 만들면 엔터치면 검색이 되죠.
이게 기본 HTML 동작 방식이고, click 했을때 되도록 하는게 javascript 를 이용한 다른 방법입니다.
<form method="get" action="search.php">
검색어: <input type="text" name="stx">
<input type="submit" value="검색">
</form>
답변 고맙습니다.
그럼, 혹시 아래 코드가 엔터키 누르면 검색 작동되게 하려면 어떤 식으로 변형해야 할까요?
초보다보니 응용을 못 하겠네요.^^;
<div id="divSearch">
<input id="q" type="text" value=""/>
<input id="b" type="image" value="검색" src="../img/btn_search.gif" align="absmiddle"/>
</div>
<div id="search_movie"></div>
해당 소스는 http://sir.co.kr/g4_skin/92600 스킨의 영화 찾기 검색 버튼 소스입니다.
소스 위치는 도메인/skin/board/mw.basic/sh.movie/movie_search.html 파일입니다.
검색 버튼 누르면 <div id="search_movie"></div>에 검색 결과가 뿌려지는 구조입니다.
form테스 내부에 submit이있으면 작동합니다.
<form>
<input type="text" name="a" />
<input type="submit" value="검색" />
</form>
이 코드는 폼을 submit 하는게 아니라 javascript 로 검색 결과 받아와서 보여주는 방식일 것 같네요. 코드는 보지 않았습니다만,
// jquery 를 사용한다는 가정하에..
$('#q').keypress(function (e) {
if (e.which == 13) {
// 검색버튼 클릭하면 실행되는 함수를 이곳에서 호출 하세요
return false;
}
});
도메인/skin/board/mw.basic/sh.movie/movie_search.html 파일에 있는 스크립트 코드가 아래와 같습니다.
알려주신 코드를 제일 맨 밑자락에 넣어봤는데.... 엔터키가 여전히 작동 안 하네요.
<script language="Javascript" type="text/javascript">
var obj = {
apikey: "DAUM_CONTENTS_DEMO_APIKEY",
init : function()
{
obj.q = document.getElementById('q');
obj.b = document.getElementById('b');
obj.r = document.getElementById('search_movie');
obj.b.onclick = obj.pingSearch;
},
// 검색을 요청하는 함수
pingSearch : function()
{
if (obj.q.value)
{
obj.s = document.createElement('script');
obj.s.type ='text/javascript';
obj.s.charset ='utf-8';
obj.s.src = 'http://apis.daum.net/contents/movie?apikey=' + obj.apikey + '&output=json&callback=obj.pongSearch&q=' + encodeURI(obj.q.value);
document.getElementsByTagName('head')[0].appendChild(obj.s);
}
},
// 검색 결과를 뿌리는 함수
pongSearch : function(z)
{
obj.r.innerHTML = '';
var msg = "";
if(!z.channel || z.channel.item.length <= 0)
{
obj.r.innerHTML = "검색 결과가 없습니다.";
return;
}
else
{
sh_movie_item = new Array();
for (var i = 0; i < z.channel.item.length; i++)
{
var item = z.channel.item[i];
sh_movie_item[i] = item;
var li = document.createElement("li");
var thumbnail = document.createElement("img");
var thumbnail_link = document.createElement("a");
var content_wrap = document.createElement("div");
var title = document.createElement("p");
var director = document.createElement("p");
var openinfo = document.createElement("p");
var actor = document.createElement("p");
// 썸네일(링크도 건다)
thumbnail_link.href = "#";
thumbnail.src= item.thumbnail[0].content;
thumbnail_link.appendChild(thumbnail);
title.innerHTML = "제목: " + item.title[0].content + "(" + item.eng_title[0].content + ")";
director.innerHTML = "감독: " + item.director[0].content;
actor.innerHTML += "배우: ";
openinfo.innerHTML += "개봉: " + item.open_info[0].content;
for(var j = 0; j < item.actor.length; j++)
{
actor.innerHTML += item.actor[j].content + " ";
}
//li.appendChild(thumbnail);
li.innerHTML += "<img src=\'"+item.thumbnail[0].content+"\' onclick=\'select_movie("+i+")\'>";
content_wrap.appendChild(title);
content_wrap.appendChild(director);
content_wrap.appendChild(openinfo);
content_wrap.appendChild(actor);
li.appendChild(content_wrap);
obj.r.appendChild(li);
}
}
},
// HTML태그 안 먹게 하는 함수
escapeHtml : function(str)
{
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
return str;
}
};
function select_movie(movie_num) {
var item = sh_movie_item[movie_num];
var actor_all = '';
for(var j = 0; j < item.actor.length; j++) {
actor_all += item.actor[j].content + "_";
}
parent.fwrite.wr_1.value = item.title[0].content + "|" + item.eng_title[0].content + "|" + item.director[0].content + "|" + actor_all + "|" + item.open_info[0].content;
parent.fwrite.wr_2.value = item.thumbnail[0].content;
parent.fwrite.wr_3.value = item.story[0].content;
parent.fwrite.wr_4.value = item.category[0].content;
parent.fwrite.wr_5.value = item.genre[0].content;
var li = parent.document.createElement("li");
var thumbnail = parent.document.createElement("img");
var thumbnail_link = parent.document.createElement("a");
var content_wrap = parent.document.createElement("div");
var title = parent.document.createElement("p");
var director = parent.document.createElement("p");
var openinfo = parent.document.createElement("p");
var actor = parent.document.createElement("p");
title.innerHTML = "제목: " + item.title[0].content + "(" + item.eng_title[0].content + ")";
director.innerHTML = "감독: " + item.director[0].content;
actor.innerHTML += "배우: ";
for(var j = 0; j < item.actor.length; j++) {
actor.innerHTML += item.actor[j].content + " ";
}
//actor.innerHTML += "배우: " + actor_all;
openinfo.innerHTML += "개봉: " + item.open_info[0].content;
li.innerHTML += "<img src=\'"+item.thumbnail[0].content+"\'>";
content_wrap.appendChild(title);
content_wrap.appendChild(director);
content_wrap.appendChild(actor);
content_wrap.appendChild(openinfo);
li.appendChild(content_wrap);
parent.document.getElementById("select_movie").innerHTML=""
parent.document.getElementById("select_movie").appendChild(li);
// self.close();
parent.SLB();
}
window.onload = function()
{
obj.init();
obj.pingSearch();
};
// jquery 를 사용한다는 가정하에..
$('#q').keypress(function (e) {
if (e.which == 13) {
// 검색버튼 클릭하면 실행되는 함수를 이곳에서 호출 하세요
return false;
}
});
</script>