관리 메뉴

I LOVE EJ

검색창기능 본문

Web publishing/JavaScript

검색창기능

BeOne 2007. 10. 15. 15:04

<script language="JavaScript">
function showSearchForm(obj){

 document.all.divSearch.style.display=""  
 document.frmlist.searchStr.focus();
 
}
function submit_searchFrom()
{
 var val = document.frmlist.searchStr.value;
 if (CheckStr(val, " ", "")==0)
    {
      alert("검색할 단어를 입력해 주세요");
      document.frmlist.searchStr.value="";
      document.frmlist.searchStr.focus();
      return;
    }
       
 document.frmlist.submit();
}
function CheckStr(strOriginal, strFind, strChange){
    var position, strOri_Length;
    position = strOriginal.indexOf(strFind); 
   
    while (position != -1){
      strOriginal = strOriginal.replace(strFind, strChange);
      position    = strOriginal.indexOf(strFind);
    }
 
    strOri_Length = strOriginal.length;
    return strOri_Length;
}

function changeSearchPart(o)
{
 var oSearchImg = document.all.searchImg;
 for(var i=0; i < oSearchImg.length; i++)
 {
  oSearchImg[i].src = "images/s_" + oSearchImg[i].key + "_off.gif";
 }
 
 o.src = "images/s_" + o.key + "_on.gif";
 document.frmlist.searchPart.value= o.key;
}
</script>

<form name="frmlist" method="post" action="SearchResult.asp">
<td width="50" bgcolor="#dddddd" align="center" onClick="showSearchForm();" style="cursor:hand;">
   <img src="images/search.gif" align="absmiddle" WIDTH="58" HEIGHT="18"
onClick="showSearchForm();">
  </td>
<div id="divSearch" style="display:none;position:absolute;left:280;top:350">
 <table cellpadding="0" cellspacing="1" bgcolor="slategray">
  <tr height="15">
   <td align="right" style="padding-right:5;">
    <img src="images/x.gif" style="cursor:hand"
onClick="javascript:document.all.divSearch.style.display='none';" WIDTH="12" HEIGHT="11">
   </td>
  </tr>
  <tr>
   <td bgcolor="white" style="padding-left:30;padding-right:30;padding-
bottom:10;padding-top:5">
   <img id="searchImg" key="subject" style="cursor:hand"
src="images/s_subject_on.gif" onClick="changeSearchPart(this);" WIDTH="51" HEIGHT="6">
   <span style="width:20"></span>
   <img id="searchImg" key="name" style="cursor:hand"
src="images/s_name_off.gif" onClick="changeSearchPart(this);" WIDTH="33" HEIGHT="6">
   <span style="width:20"></span>
   <img id="searchImg" key="content" style="cursor:hand"
src="images/s_content_off.gif" onClick="changeSearchPart(this);" WIDTH="51" HEIGHT="6"><br>
   <input name="searchStr" class="verdana" value style="width:120; height:18;
padding:2; border:1 solid slategray"> 
   <input type="hidden" name="searchPart" size="10" value="subject">
   <img src="images/b_search.gif" style="cursor:hand" align="absmiddle"
onClick="submit_searchFrom();" WIDTH="57" HEIGHT="17">&nbsp;
   </td>
  </tr>
 </table>
</div>
</form>


참고 : Taeyo's ASP

참고 : 자바스크립트의 기초와 응용