fix: 演唱會查詢script

concert/concert.html

@@ -124,13 +124,11 @@
     <div class="search-section">
         <div class="concert-search-box">
             <div class="concert-search-row">
-                <input type="text" class="search-input" id="concert-query"
-                    placeholder="搜尋曲目或場次…">
-                <input type="text" class="search-input" id="concert-member"
-                    placeholder="成員或段落（可空白）…">
-                <button type="button" class="concert-search-btn" id="concert-search-btn">查這場巡迴</button>
+                <input type="text" class="search-input" id="concert-query" value="" placeholder="搜尋曲目或場次">
+                <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>
+            <span id="concert-search-result">輸入後按「查詢」，會顯示比對結果。</span>
         </div>
     </div>
     <div class="concert-container">
@@ -265,7 +263,7 @@
                 </div>
             </div>
 
-            <div class="con-2" data-tour="20TH ANNIV.">
+            <!-- <div class="con-2" data-tour="20TH ANNIV.">
                 <span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
                 <img src="../assets/images/concert/2017.jpg" alt="">
 
@@ -453,7 +451,7 @@
                     </div>
                     <label for="expand-con-2-5" class="expand-btn"></label>
                 </div>
-            </div>
+            </div> -->
             <!-- 演唱會 03 -->
             <div class="con-3" data-tour="NOW・HERE・AGAIN.">
                 <span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
@@ -682,6 +680,8 @@
             Design by <span class="mark_b">Jekkinoopy Studio</span>
         </a>
     </footer>
+    <!-- <link rel="stylesheet" href="search.css"> -->
+    <script src="search.js"></script>
     <script>
         const canvas = document.getElementById('particles');
         const ctx = canvas.getContext('2d');

concert/search.js

@@ -0,0 +1,60 @@
+// 1.bind
+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");
+
+console.log("myQuery", myQuery);
+console.log("myMember", myMember);
+console.log("myBtn", myBtn);
+console.log("mySpan", mySpan);
+
+function countMatchingTracks(keyword, member) {
+    const tracks = document.querySelectorAll(".track-item .track");
+    const k = keyword.trim().toLowerCase();
+    const m = member.trim().toLowerCase();
+    let count = 0;
+
+    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;
+        }
+    });
+
+    return count;
+}
+
+// 2.action
+if (myBtn && mySpan) {
+    myBtn.addEventListener("click", function () {
+        console.log("myBtn", myBtn);
+
+        // 1.抓 input
+        let getQuery = myQuery ? myQuery.value : "";
+        let getMember = myMember ? myMember.value : "";
+        console.log("getQuery", getQuery);
+        console.log("getMember", getMember);
+
+        if (!getQuery.trim() && !getMember.trim()) {
+            mySpan.innerText = "請至少輸入曲目／場次，或成員其中一項。";
+            return;
+        }
+
+        const count = countMatchingTracks(getQuery, getMember);
+
+        // 2.組成 text
+        let tmpText;
+        if (getMember.trim()) {
+            tmpText = `關鍵字「${getQuery || "（未填）"}」、成員「${getMember}」：在巡迴歌單中共 ${count} 筆曲目。`;
+        } else {
+            tmpText = `關鍵字「${getQuery}」：在巡迴歌單中共 ${count} 筆曲目。`;
+        }
+        console.log("tmpText", tmpText);
+
+        // 3.顯示在 span
+        mySpan.innerText = tmpText;
+    });
+}