자바스크립트로 검색창 만들기
코드확인은 http://www.mediaplayer.kr/main/bbs/html_editor.php
좌측창에 코드 붙이고 결과보기 클릭해서 확인하세요.
[code]
<style>
.searchSpan { font-weight:bold; color:#c00000; }
</style>
<input id=searchInput type=text>
<button type=button style=cursor:pointer onclick=searchMode()>검색</button>
<input id=searchNumber type=text>
<button type=button style=cursor:pointer onclick=startMode()>초기화</button>
<div id=searchDiv>
그누보드는 최고입니다.<br>
그누보드는 멋집니다.
</div>
<script>
originalData = searchDiv.innerHTML;
function searchMode() {
searchString = searchInput.value.trim();
if (searchString == "" || originalData.indexOf(searchString) < 0) {
searchNumber.value = 0;
searchDiv.innerHTML = originalData;
}
else {
searchNumber.value = originalData.split(searchString).length - 1;
searchDiv.innerHTML = originalData.replaceAll(searchString, "<span class=searchSpan>" + searchString + "</span>");
}
}
function startMode() {
searchInput.value = searchNumber.value = "";
searchDiv.innerHTML = originalData;
}
</script>
[/code]
1. css 의 .searchSpan { font-weight:bold; color:#c00000; } 는 본인의 입맛대로...
2. replaceAll() 함수를 사용하였기에 안 먹는 브라우저(예컨대 IE)도 있을 것이니
그럴때는 replace(), RegExp, gi, 등을 적절히 상황에 맞게 적용하세요.
3. 내용물은 div id=searchDiv 안에 넣어줍니다.
4. 여분필드나 첨부파일.txt 나 curl 이나 아작스로 내용물을 불러올 때도
문서의 html 내용물 전체를 div id=searchDiv 안에 들어가게끔 하면 됩니다.
5. 나머지 꾸미기는 본문의 입맛대로 하시길요.
----------
6. 아작스로 문서를 부를 때는 문서가 모두 로드된 후 스크립트가 실행되도록 소스를 약간 수정해 주셔야겠네요...
댓글 4개
그누보드가 아니더라도 검색기능을 넣을수 있어서 좋습니다 ^^
[http://sir.kr/data/editor/2210/ac0d3f5fd25b1ab45f72d8fc67dab188_1665952176_5891.png]
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2034 | 3년 전 | 4245 | ||
| 2033 | 3년 전 | 2949 | ||
| 2032 | 3년 전 | 3203 | ||
| 2031 | 3년 전 | 2736 | ||
| 2030 |
|
3년 전 | 2926 | |
| 2029 | 3년 전 | 4550 | ||
| 2028 |
|
3년 전 | 2241 | |
| 2027 | 3년 전 | 3834 | ||
| 2026 | 3년 전 | 2927 | ||
| 2025 | 3년 전 | 3046 | ||
| 2024 |
유레카56
|
3년 전 | 2313 | |
| 2023 |
sIr어드밈
|
3년 전 | 3032 | |
| 2022 | 3년 전 | 3811 | ||
| 2021 | 3년 전 | 3213 | ||
| 2020 | 3년 전 | 2876 | ||
| 2019 | 3년 전 | 5119 | ||
| 2018 | 3년 전 | 3682 | ||
| 2017 | 3년 전 | 3610 | ||
| 2016 | 3년 전 | 5484 | ||
| 2015 | 3년 전 | 3649 | ||
| 2014 | 3년 전 | 3467 | ||
| 2013 | 3년 전 | 2653 | ||
| 2012 | 3년 전 | 3068 | ||
| 2011 | 3년 전 | 4263 | ||
| 2010 |
sIr어드민
|
3년 전 | 2315 | |
| 2009 | 3년 전 | 3566 | ||
| 2008 |
|
3년 전 | 2415 | |
| 2007 |
|
3년 전 | 2276 | |
| 2006 |
|
3년 전 | 2898 | |
| 2005 | 3년 전 | 4384 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기