[JavaScript] 티스토리 블로그에 자바스크립트 검색기능 추가하기

​​이전에 국내 코인 거래소에서 취급하는 상장 코인 리스트를 취합하여 포스팅을 했었는데 코인 수가 많아서 자바스크립트를 활용하여 검색 기능을 넣었습니다.

 

2022.05.24 - [코인] - 국내 거래소 상장 코인 리스트

국내 거래소 상장 코인 리스트

ctrl + f 찾기 기능으로 찾아도 되므로 굳이 없어도 되는 기능이긴 했지만 방문자 편의를 위해 넣어봤습니다.

 

 

목차

 

구현 방법

저는 글을 완성한 후 검색 기능을 삽입했기 때문에 글을 먼저 작성했다는 전제하에 기능 구현 방법을 설명하는 것으로 하겠습니다.

글 작성 후, 검색어를 입력할 창을 input tag를 이용하여 만들어 줍니다.

글쓰기 에디터를 기본 모드에서 HTML 모드로 바꿔줍니다.

 

입력 상자 삽입

적당한 위치에 아래 코드를 삽입해 줍니다.

<input id="search_coin" type="text" placeholder="Type to Search" onkeyup="filter()">

 

그러면 아래와 같은 입력 상자가 나타납니다.

 

함수 작성

input tag에 onkeyup 속성을 사용하여 키보드 입력 이벤트가 발생할 때마다 자바스크립트의 filter 함수가 실행되도록 했습니다.

그러면 filter 함수를 만들어줘야겠죠. 에디터의 HTML 모드에서 가장 위쪽이나 아래쪽에 filter 함수를 정의해 줍니다.

<script type="text/javascript">
function filter(){
    var search, list, i, res = "";

    search = document.getElementById("search_coin").value.toUpperCase();  // input tag의 value 값 취득
  
    if(search != ""){
      list = document.getElementById("coin_list").innerHTML.split("<br>");  // coin_list를 배열로 변환
      list[list.length - 1] = list[list.length - 1].split("</p>")[0];

      for(i=1; i<list.length; i++){
        if(list[i].toUpperCase().includes(search)){
          res += list[i].replaceAll("&nbsp;", " ") + "\n";  // 검색 결과를 변수에 저장
        }
      }
      if(res == "")
        res = "해당 코인에 대한 검색결과가 없습니다.";
    }
  	document.getElementById("filter_result").innerText = res;  // 검색 결과 출력
}
</script>

coin_list를 br 태그로 구분해서 리스팅 했는데요, 포스팅을 할 때 코인 리스트를 메모장에 있는 것을 붙여 넣었기 때문에 텍스트를 구분하는 작업이 필요했습니다. 또한 띄어쓰기가 엔티티 코드로 되어있기 때문에 엔티티 코드를 치환해주어야 했기 때문에 검색 결과 출력 전 nbsp를 공백으로 치환했습니다.

 

id 속성 부여

이것만으로는 실행되지 않는데, 코인 리스트와 검색 결과를 출력할 부분에 id 속성을 각각 coin_list와 filter_result로 지정해 주어야 합니다. 셀렉터로 선택할 수도 있지만 취향에 따라 방식을 선택하는 것이기에 저는 id 속성을 지정해 주는 방법으로 했습니다.

<p data-ke-size="size16">찾고싶은 코인을 검색해 보세요.</p>
<p><input id="search_coin" type="text" placeholder="Type to Search" onkeyup="filter()"></p>  <!-- 검색어 입력을 위해 추가한 input tag -->
<div id="filter_result"></div>  <!-- 검색결과를 출력할 div tag -->

<div id="coin_list">  <!-- 코인 리스트를 div tag로 감싼다 -->
<p data-ke-size="size16"><br>콜라토큰(COLA)&nbsp;:&nbsp;빗썸&nbsp; <br>골렘(GNT)&nbsp;:&nbsp;코빗&nbsp; <br> ...
   ...중략...
</div>

 

코인 리스트는 통째로 묶어서 id가 coin_list인 div 태그로 감싸주고, 검색 결과는 input 태그 바로 아래에 id가 filter_result인 div 태그를 만들어 주었습니다.

 

구현 화면

 

마치며

잘 동작되기는 하지만 포스팅을 발행한 후에 검색 기능을 추가했기 때문에 발행한 글에 맞춰 코드를 작성하느라 깔끔하지는 않습니다만, 그래도 복잡한 코드도 아니라 그대로 적용하였습니다. 자바스크립트로 검색 기능을 사용하시려는 분들께 도움이 되길 바랍니다.