안녕하세요. 도움이 필요해서 질문드립니다.
지난달에 질문했다가 혼자서 해결해 보려고 이리저리 해봤는데도 잘 안되서 다시 질문드립니다.ㅠㅠ
윈도우의 ctrl+F 기능인 현재창에서 단어검색하는 것을
제 사이트의 특정 페이지에서 구현하려고 합니다.
검색을 통해 티스토리에 적용을 하신 분이 있어서 코드를 받아서 적용을 해봤습니다.
티스토리에서는 스킨 편집에서 코드를 삽입하면 적용이 되어서 잘 작동을 합니다.
아래 티스토리 계정의 오른쪽의 위쪽에 보시면 검색창이 나타납니다.
https://oshofriends.tistory.com/2
그런데, 같은 코드를 라이믹스에 적용하면
검색창만 나타나고 기능이 적용이 되질 않습니다.
https://oshofriends.com/allmenu
혹시 어느 부분을 어떻게 수정해야 하는지 고수님들의 조언을 부탁드립니다.
<!-- 본문 내용 검색창 시작 --> <div class="search-in-body"> <input type="search" class="search-box" placeholder=" 본문 검색"> <button data-search="next" class="next-btn">∨</button> <button data-search="prev" class="prev-btn">∧</button> <button data-search="clear" class="clear-btn">Ⅹ</button> <span class="kwt-count">-</span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> <script> document.body.onload = function() { var $input = document.querySelector("input[type='search']"), $clearBtn = document.querySelector("button[data-search='clear']"), $prevBtn = document.querySelector("button[data-search='prev']"), $nextBtn = document.querySelector("button[data-search='next']"), $content = document.querySelector(".entry-content"), $contentMark = new Mark($content), $results, currentClass = "current", offsetTop = 200, currentIndex = 0; var variableCounter = 0; var totalCount = 0; $input.addEventListener("input", function() { var searchVal = this.value; $contentMark.unmark( { done: function(totalMatches) { $contentMark.mark(searchVal, { separateWordSearch: false, acrossElements: true, done: function(totalMatches) { $results = $content.querySelectorAll("mark"); totalCount = totalMatches; if (totalCount) { variableCounter = 1; $(".kwt-count").html(variableCounter+ " / " +totalCount); } } }); } }); }); $nextBtn.addEventListener("click", prevNextHandler); $prevBtn.addEventListener("click", prevNextHandler); $nextBtn.after($prevBtn); function prevNextHandler() { if ($results.length) { currentIndex += (this.dataset.search === "prev" ? -1 : 1); if (currentIndex < 0) { currentIndex = $results.length - 1; } if (currentIndex > $results.length - 1) { currentIndex = 0; } jumpTo(); } } $("[data-search=next]").click(function() { if (variableCounter < totalCount) variableCounter = variableCounter + 1; else variableCounter = 1; $(".kwt-count").html(variableCounter+ " / " +totalCount); }) $("[data-search=prev]").click(function() { if (variableCounter > 1) variableCounter = variableCounter - 1; else variableCounter = totalCount; $(".kwt-count").html(variableCounter+ " / " +totalCount); }) function jumpTo() { if ($results.length) { var position, $current = $results[currentIndex]; $results.forEach($result => $result.classList.remove(currentClass)); if ($current) { $current.classList.add(currentClass); position = $current.offsetTop - offsetTop; window.scrollTo(0, position); } } } $clearBtn.addEventListener("click", function() { $contentMark.unmark(); $input.value = "" $input.focus(); variableCounter = 0; totalCount = 0; $(".kwt-count").html("-"); }); }; $(document).ready(function () { $(".search-in-body").addClass("sib-absolute"); $(window).scroll(function () { if ($(this).scrollTop() > 450) { $(".search-in-body").addClass("sib-fixed"); $(".search-in-body").removeClass("sib-absolute"); } else { $(".search-in-body").addClass("sib-absolute"); $(".search-in-body").removeClass("sib-fixed"); } }); }); </script> <!-- 본문 내용 검색창 끝 -->
소스코드중
$content = document.querySelector(".entry-content")
.entry-content를 수정하셔야 할것 같습니다. 메뉴 내용 검색이 의도하신것이라면 사이트 구조상 .columnContent로 변경하시면 될것 같습니다.