자바스크립트로 검색창 만들기

· 2022-01-27 (목) 11:21:40 · 5846 · 4

 

코드확인은 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개

좋은 팁 감사 드려요.
2022-01-27 (목) 17:56:53
@들레아빠 별로 좋은 팁 아닙니다.
좋은 팁 감사드립니다. 팁 올리신지 한참후에 적용해보는데요.
그누보드가 아니더라도 검색기능을 넣을수 있어서 좋습니다 ^^
[http://sir.kr/data/editor/2210/ac0d3f5fd25b1ab45f72d8fc67dab188_1665952176_5891.png]
2022-10-17 (월) 19:13:18
@김철용 감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-03-01 조회 6,105
22-02-27 조회 7,821
22-02-24 조회 5,402
22-02-20 조회 5,428
22-02-17 조회 6,373
22-02-16 조회 5,070
22-02-15 조회 5,306
22-02-15 조회 4,814
22-02-14 조회 5,065
22-02-13 조회 6,748
22-02-11 조회 4,324
22-02-06 조회 5,926
22-02-05 조회 4,992
22-02-04 조회 5,081
22-02-04 조회 4,317
22-02-02 조회 4,884
22-01-27 조회 5,847
22-01-27 조회 5,234
22-01-26 조회 4,925
22-01-25 조회 8,277
22-01-24 조회 5,782
22-01-23 조회 5,727
22-01-20 조회 7,785
22-01-18 조회 5,681
22-01-16 조회 5,693
22-01-14 조회 4,709
22-01-11 조회 5,123
22-01-10 조회 6,460
22-01-09 조회 4,208
22-01-07 조회 5,779