안녕하세요. 도움이 필요해서 질문드립니다.

지난달에 질문했다가 혼자서 해결해 보려고 이리저리 해봤는데도 잘 안되서 다시 질문드립니다.ㅠㅠ

 

윈도우의 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>

<!-- 본문 내용 검색창 끝 -->

 

 

  • profile

    소스코드중

    $content = document.querySelector(".entry-content")

     

    .entry-content를 수정하셔야 할것 같습니다. 메뉴 내용 검색이 의도하신것이라면 사이트 구조상 .columnContent로 변경하시면 될것 같습니다.

  • profile profile

    댓글 정말 감사드립니다.^^

    말씀해주신 코드로 변경해서 적용을 해도 적용이 되지 않는데,

    아마 제가 의도한 것이 메뉴가 아니라 각 메뉴들의 분류(카테고리)를

    위젯으로 출력시킨 것이란 걸 말씀드리지 못한 것 같습니다.

     

    그리고 검색어를 찾지 못하는 문제라기 보다는

    검색 자체가 되지 않는 것 같습니다. 자바스크립트가 아예 적용이 되지 않는 듯 해서요.

    검색값이 없으면 없다라는 표시라도 되어야 하는데, 아무런 반응자체가 없어서요...