Ctrl+F 기능인 현재창에서 단어검색하는 것을 구현하려고 하는데 잘 안됩니다.
CMS/프레임워크 | Rhymix 2.0 |
---|---|
개발 언어 | PHP 7.4 |
문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
안녕하세요. 도움이 필요해서 질문드립니다.
지난달에 질문했다가 혼자서 해결해 보려고 이리저리 해봤는데도 잘 안되서 다시 질문드립니다.ㅠㅠ
윈도우의 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>
<!-- 본문 내용 검색창 끝 -->
<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>
<!-- 본문 내용 검색창 끝 -->
flowerrain
Lv. 4
댓글 2
소스코드중
$content = document.querySelector(".entry-content")
.entry-content를 수정하셔야 할것 같습니다. 메뉴 내용 검색이 의도하신것이라면 사이트 구조상 .columnContent로 변경하시면 될것 같습니다.
댓글 정말 감사드립니다.^^
말씀해주신 코드로 변경해서 적용을 해도 적용이 되지 않는데,
아마 제가 의도한 것이 메뉴가 아니라 각 메뉴들의 분류(카테고리)를
위젯으로 출력시킨 것이란 걸 말씀드리지 못한 것 같습니다.
그리고 검색어를 찾지 못하는 문제라기 보다는
검색 자체가 되지 않는 것 같습니다. 자바스크립트가 아예 적용이 되지 않는 듯 해서요.
검색값이 없으면 없다라는 표시라도 되어야 하는데, 아무런 반응자체가 없어서요...