feat: 演唱會搜尋清單
This commit is contained in:
+51
-2
@@ -97,15 +97,62 @@
|
||||
box-shadow: 0 0 10px rgba(255, 204, 0, 0.35);
|
||||
}
|
||||
|
||||
#concert-search-result {
|
||||
.concert-search-result {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.concert-search-summary {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.concert-search-hits {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
max-width: 720px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.concert-search-hits li {
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255, 248, 223, 0.1);
|
||||
border: 1px solid rgba(255, 204, 0, 0.35);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.concert-search-hits .hit-track {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
color: #ffdd00;
|
||||
}
|
||||
|
||||
.concert-search-hits .hit-meta {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.concert-search-hits .hit-more {
|
||||
text-align: center;
|
||||
border-style: dashed;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.track-item.is-search-hit .track {
|
||||
color: #ffdd00;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -128,7 +175,9 @@
|
||||
<input type="text" class="search-input" id="concert-member" value="" placeholder="成員或段落（可空白）">
|
||||
<button type="button" class="concert-search-btn" id="concert-search-btn">查詢</button>
|
||||
</div>
|
||||
<span id="concert-search-result">輸入後按「查詢」，會顯示比對結果。</span>
|
||||
<div id="concert-search-result" class="concert-search-result" aria-live="polite">
|
||||
<p class="concert-search-summary">輸入後按「查詢」，會在下方列出比對到的曲目。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="concert-container">
|
||||
|
||||
+89
-29
@@ -2,59 +2,119 @@
|
||||
let myQuery = document.querySelector("#concert-query");
|
||||
let myMember = document.querySelector("#concert-member");
|
||||
let myBtn = document.querySelector("#concert-search-btn");
|
||||
let mySpan = document.querySelector("#concert-search-result");
|
||||
let myResult = document.querySelector("#concert-search-result");
|
||||
|
||||
console.log("myQuery", myQuery);
|
||||
console.log("myMember", myMember);
|
||||
console.log("myBtn", myBtn);
|
||||
console.log("mySpan", mySpan);
|
||||
const SEARCH_LIST_MAX = 12;
|
||||
|
||||
function countMatchingTracks(keyword, member) {
|
||||
function getTrackContext(trackEl) {
|
||||
const venueBlock = trackEl.closest(".track-list")?.parentElement;
|
||||
const tourCard = trackEl.closest(".con-1, .con-2, .con-3, .con-4");
|
||||
return {
|
||||
trackName: trackEl.textContent.trim(),
|
||||
tourTitle: tourCard?.querySelector(".title")?.textContent.trim().replace(/\s+/g, " ") || "",
|
||||
location: venueBlock?.querySelector(".location")?.textContent.trim() || ""
|
||||
};
|
||||
}
|
||||
|
||||
function findMatchingTracks(keyword, member) {
|
||||
const tracks = document.querySelectorAll(".track-item .track");
|
||||
const k = keyword.trim().toLowerCase();
|
||||
const m = member.trim().toLowerCase();
|
||||
let count = 0;
|
||||
const hits = [];
|
||||
|
||||
tracks.forEach(function (trackEl) {
|
||||
const text = trackEl.textContent.toLowerCase();
|
||||
const matchKeyword = !k || text.includes(k);
|
||||
const matchMember = !m || text.includes(m);
|
||||
if (matchKeyword && matchMember) {
|
||||
count += 1;
|
||||
hits.push({
|
||||
el: trackEl.closest(".track-item"),
|
||||
...getTrackContext(trackEl)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return count;
|
||||
return hits;
|
||||
}
|
||||
|
||||
// 2.action
|
||||
if (myBtn && mySpan) {
|
||||
myBtn.addEventListener("click", function () {
|
||||
console.log("myBtn", myBtn);
|
||||
function clearSearchHighlights() {
|
||||
document.querySelectorAll(".track-item.is-search-hit").forEach(function (item) {
|
||||
item.classList.remove("is-search-hit");
|
||||
});
|
||||
}
|
||||
|
||||
// 1.抓 input
|
||||
let getQuery = myQuery ? myQuery.value : "";
|
||||
let getMember = myMember ? myMember.value : "";
|
||||
console.log("getQuery", getQuery);
|
||||
console.log("getMember", getMember);
|
||||
function renderSearchResults(getQuery, getMember, hits) {
|
||||
if (!myResult) return;
|
||||
|
||||
if (!getQuery.trim() && !getMember.trim()) {
|
||||
mySpan.innerText = "請至少輸入曲目／場次，或成員其中一項。";
|
||||
clearSearchHighlights();
|
||||
|
||||
const summary = document.createElement("p");
|
||||
summary.className = "concert-search-summary";
|
||||
|
||||
if (!hits.length) {
|
||||
summary.textContent = `關鍵字「${getQuery || "（未填）"}」${getMember.trim() ? `、成員「${getMember}」` : ""}：沒有比對到曲目，請換字再試。`;
|
||||
myResult.replaceChildren(summary);
|
||||
return;
|
||||
}
|
||||
|
||||
const count = countMatchingTracks(getQuery, getMember);
|
||||
|
||||
// 2.組成 text
|
||||
let tmpText;
|
||||
if (getMember.trim()) {
|
||||
tmpText = `關鍵字「${getQuery || "（未填）"}」、成員「${getMember}」：在巡迴歌單中共 ${count} 筆曲目。`;
|
||||
summary.textContent = `關鍵字「${getQuery || "（未填）"}」、成員「${getMember}」：共 ${hits.length} 筆，以下列出前 ${Math.min(hits.length, SEARCH_LIST_MAX)} 筆。`;
|
||||
} else {
|
||||
tmpText = `關鍵字「${getQuery}」：在巡迴歌單中共 ${count} 筆曲目。`;
|
||||
summary.textContent = `關鍵字「${getQuery}」：共 ${hits.length} 筆，以下列出前 ${Math.min(hits.length, SEARCH_LIST_MAX)} 筆。`;
|
||||
}
|
||||
console.log("tmpText", tmpText);
|
||||
|
||||
// 3.顯示在 span
|
||||
mySpan.innerText = tmpText;
|
||||
const list = document.createElement("ul");
|
||||
list.className = "concert-search-hits";
|
||||
|
||||
hits.slice(0, SEARCH_LIST_MAX).forEach(function (hit) {
|
||||
if (hit.el) hit.el.classList.add("is-search-hit");
|
||||
|
||||
const li = document.createElement("li");
|
||||
const trackLine = document.createElement("span");
|
||||
trackLine.className = "hit-track";
|
||||
trackLine.textContent = hit.trackName;
|
||||
|
||||
const metaLine = document.createElement("span");
|
||||
metaLine.className = "hit-meta";
|
||||
metaLine.textContent = [hit.tourTitle, hit.location].filter(Boolean).join(" · ");
|
||||
|
||||
li.appendChild(trackLine);
|
||||
if (metaLine.textContent) li.appendChild(metaLine);
|
||||
list.appendChild(li);
|
||||
});
|
||||
|
||||
if (hits.length > SEARCH_LIST_MAX) {
|
||||
const more = document.createElement("li");
|
||||
more.className = "hit-more";
|
||||
more.textContent = `另有 ${hits.length - SEARCH_LIST_MAX} 筆未顯示，請縮小關鍵字。`;
|
||||
list.appendChild(more);
|
||||
}
|
||||
|
||||
myResult.replaceChildren(summary, list);
|
||||
|
||||
const firstHit = hits[0]?.el;
|
||||
if (firstHit) {
|
||||
firstHit.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
}
|
||||
}
|
||||
|
||||
// 2.action
|
||||
if (myBtn && myResult) {
|
||||
myBtn.addEventListener("click", function () {
|
||||
let getQuery = myQuery ? myQuery.value : "";
|
||||
let getMember = myMember ? myMember.value : "";
|
||||
|
||||
if (!getQuery.trim() && !getMember.trim()) {
|
||||
myResult.replaceChildren();
|
||||
const summary = document.createElement("p");
|
||||
summary.className = "concert-search-summary";
|
||||
summary.textContent = "請至少輸入曲目／場次，或成員其中一項。";
|
||||
myResult.appendChild(summary);
|
||||
clearSearchHighlights();
|
||||
return;
|
||||
}
|
||||
|
||||
const hits = findMatchingTracks(getQuery, getMember);
|
||||
renderSearchResults(getQuery, getMember, hits);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user