輸入框自動補全功能

builder/lists/index.html

@@ -183,7 +183,7 @@
               <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="builderSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
             </div>
@@ -542,6 +542,7 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
+  <script src="../../js/lists.js"></script>
   <script src="./js/main.js"></script>
 </body>
 

builder/lists/js/main.js

@@ -4,131 +4,12 @@ $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-
-// 處理 radio 選取狀態
-$('.filter-list .form-check').click(function (e) {
-  e.preventDefault();
-  $(this).find('.form-check-input').prop('checked', true);
-
-  // 取得 radio 按鈕的 label
-  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
-
-  // 取上一層 search-tab 按鈕文字
-  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
-  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
-
-  updateSelectedOptions(buttonId, buttonValue, radioLabel);
-});
-
-let filterList = []; // 篩選條件
-
-// 更新篩選狀態
-function updateSelectedOptions(id, button, radio) {
-  page = 1;
-  console.log('更新篩選狀態', button, radio);
-
-  if (filterList.length) {
-    let exists = false; // 判斷是否已存在
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-
-      // 如有重複 button 只改 radio 狀態
-      if (element.text === button) {
-        element.value = radio;
-        exists = true;
-        // 更新篩選的值
-        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
-      }
-    }
-
-    // 如果 filterList 中不存在則新增
-    if (!exists) {
-      const newItem = {
-        id: id,
-        text: button,
-        value: radio
-      };
-
-      filterList.push(newItem);
-      createFilterHtml(newItem);
-    }
-
-
-  } else {
-    // 儲存篩選條件
-    filterList.push({
-      id: id,
-      text: button,
-      value: radio
-    })
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-      createFilterHtml(element);
-    }
-  }
-
-  builderSearch(); // 搜尋
-
-  console.log('filterList', filterList);
-
-  // 切換按鈕選取狀態
-  $('.dropdown').each(function () {
-    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
-    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
-  });
-}
-
-// 新增篩選條件 HTML
-function createFilterHtml(item) {
-  let dom = `
-    <div class="me-3">
-      <span class="d-flex budget">
-        <p class="me-1">${item.text}：${item.value}</p>
-        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
-      </span>
-    </div>`;
-
-  $('.search-tab-result').append(dom);
-  $('#removeResultBtn').show();
-}
-
-// 清除單一篩選條件
-function removeBtn(element, id, val) {
-  filterList = filterList.filter(item => item.text !== val);
-
-  ; // 移除 div & active
-  $(element).closest('.me-3').remove();
-  $(`#${id}`).removeClass('active');
-  // 移除同一層級 ul 內所有 radio 的選取狀態
-  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
-
-  if (filterList.length === 0) {
-    $('#removeResultBtn').hide();
-  }
-
-  builderSearch();
-}
-
-let assignOrder = ""; // 當前排序
-
-// new, hot, recommend 排序 (預設推薦)
-// $(".search-btn-filter button").click(function () {
-//   // 切換選取狀態
-//   $('.search-btn-filter').find('.active').removeClass('active');
-//   $(this).addClass('active');
-//   assignOrder = $(this).attr('id');
-//   builderSearch("order_by");
-// });
-
 let page = 1; // 當前頁數
 let pageSize = 18; // 每頁數量
 let isFirstLoad = true; // 初始載入
 
 // 列表篩選
-async function builderSearch() {
+async function dataSearch() {
   let url;
   $('#builderSpinner').show();
   $('#builderList').hide();
@@ -246,141 +127,4 @@ async function builderSearch() {
   }
 }
 
-builderSearch();
-
-$('.keywords').on('keydown', function (event) {
-  if (event.key === 'Enter') {
-    builderSearch();
-  }
-});
-
-let maxPagesMobile = 5; // 手機板最多顯示 5 頁
-let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
-
-// 分頁
-function setPagination(pages) {
-  let screenWidth = $(window).width();
-  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-
-  function renderPagination(currentPage) {
-    let dom = `
-      <li class="page-item" onclick="handlePagination(this, 'previous')">
-        <a class="page-link previous hidden" href="#" aria-label="Previous">
-          <span aria-hidden="true">＜</span>
-        </a>
-      </li>`;
-
-    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
-    let endPage = Math.min(startPage + maxPages - 1, pages);
-
-    if (endPage - startPage < maxPages) {
-      startPage = Math.max(endPage - maxPages + 1, 1);
-    }
-
-    for (let index = startPage; index <= endPage; index++) {
-      dom += `
-        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
-          <a class="page-link" href="#">${index}</a>
-        </li>`;
-    }
-
-    dom += `
-      <li class="page-item" onclick="handlePagination(this, 'next')">
-        <a class="page-link next" href="#" aria-label="Next">
-          <span aria-hidden="true">＞</span>
-        </a>
-      </li>`;
-
-    $('.filter-list .pagination').html(dom);
-    updateVisibility(currentPage, pages);
-  }
-
-  // 更新上頁 & 下頁的按鈕顯示狀態
-  function updateVisibility(page, pages) {
-    if (page === 1) {
-      $('.page-link.previous').addClass('hidden');
-    } else {
-      $('.page-link.previous').removeClass('hidden');
-    }
-
-    if (page === pages) {
-      $('.page-link.next').addClass('hidden');
-    } else {
-      $('.page-link.next').removeClass('hidden');
-    }
-  }
-
-  window.handlePagination = function (item, type = "") {
-    if (type === "previous" && page > 1) {
-      page--;
-    } else if (type === "next" && page < pages) {
-      page++;
-    } else if (!type) {
-      page = parseInt($(item).find('.page-link').text());
-    }
-    renderPagination(page);
-    builderSearch();
-  }
-
-  renderPagination(page);
-
-  $(window).on('resize', function () {
-    let newScreenWidth = $(window).width();
-    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
-      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
-      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-      renderPagination(page);
-    }
-  });
-}
-
-// 頁碼處理
-function handlePagination(item, type = "") {
-  if (type === "previous") {
-    // 往前一頁
-    if (page > 1) {
-      page--;
-    }
-    console.log(page);
-  } else if (type === "next") {
-    // 往後一頁
-    page++;
-    console.log(page);
-  } else {
-    // 直接點擊頁碼
-    page = parseInt($(item).find('.page-link')[0].innerText);
-  }
-
-  // 切換選取狀態
-  $('.filter-list .page-item').removeClass('active');
-  $('.filter-list .page-item').eq(page).addClass('active');
-
-  // 設定上一頁按鈕的顯示狀態
-  if (page === 1) {
-    $('.page-link.previous').addClass('hidden');
-  } else {
-    $('.page-link.previous').removeClass('hidden');
-  }
-
-  builderSearch(); // 搜尋
-}
-
-// 熱搜關鍵字搜尋
-$(".search-bar-keyword a").click(function () {
-  let keyword = $(this).text();
-  $('.keywords').val(keyword);
-  builderSearch();
-});
-
-// 全部清除
-$("#removeResultBtn").click(function () {
-  console.log('全部清除');
-  filterList.length = 0; // 清空篩選陣列
-  $('.keywords').val(''); // 清空搜尋欄位
-  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-  $('.search-tab-result').empty(); // 清空篩選條件 dom
-  // 取消選取狀態
-  $('.filter-list input[type="radio"]').prop('checked', false);
-  $('.search-tab').removeClass('active');
-  builderSearch();
-});
+dataSearch();

css/lists.css

@@ -217,4 +217,32 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+.autocomplete-items {
+  max-height: 282px;
+  overflow-y: auto;
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+.autocomplete-items div {
+  padding: 15px;
+  cursor: pointer;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4;
+}
+.autocomplete-items div:hover {
+  color: #fff;
+  background-color: #EE7800;
+}
+
+.autocomplete-active {
+  background-color: DodgerBlue !important;
+  color: #ffffff;
 }/*# sourceMappingURL=lists.css.map */

css/lists.scss

@@ -251,4 +251,35 @@
       transform: translate(-50%, -50%);
     }
   }
+}
+
+// AutoComplete
+.autocomplete-items {
+  max-height: 282px;
+  overflow-y: auto;
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0;
+
+  div {
+    padding: 15px;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
+
+    &:hover {
+      color: #fff;
+      background-color: #EE7800;
+    }
+  }
+}
+
+.autocomplete-active {
+  background-color: DodgerBlue !important;
+  color: #ffffff;
 }

designers/lists/index.html

@@ -180,12 +180,15 @@
         <div class="card search-card">
           <div class="card-body p-4">
             <div class="input-group input-group-lg mb-2">
-              <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
+              <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="designerSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
+
+              <!-- 自動補全 -->
+              <div id="autocomplete-list" class="autocomplete-items"></div>
             </div>
 
             <div class="search-bar-keyword d-flex mt-3 pl-4">
@@ -986,6 +989,7 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
+  <script src="../../js/lists.js"></script>
   <script src="./js/main.js"></script>
 </body>
 

designers/lists/js/main.js

@@ -1,120 +1,9 @@
-// $( document ).ready(function() {
-// });
-
 // 載入共用 template
 $('#navbar').load('../../template/navbar.html');
 $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-
-// 處理 radio 選取狀態
-$('.filter-list .form-check').click(function (e) {
-  e.preventDefault();
-  $(this).find('.form-check-input').prop('checked', true);
-
-  // 取得 radio 按鈕的 label
-  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
-
-  // 取上一層 search-tab 按鈕文字
-  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
-  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
-
-  updateSelectedOptions(buttonId, buttonValue, radioLabel);
-});
-
-let filterList = []; // 篩選條件
-
-// 更新篩選狀態
-function updateSelectedOptions(id, button, radio) {
-  page = 1;
-  console.log('更新篩選狀態', button, radio);
-
-  if (filterList.length) {
-    let exists = false; // 判斷是否已存在
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-
-      // 如有重複 button 只改 radio 狀態
-      if (element.text === button) {
-        element.value = radio;
-        exists = true;
-        // 更新篩選的值
-        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
-      }
-    }
-
-    // 如果 filterList 中不存在則新增
-    if (!exists) {
-      const newItem = {
-        id: id,
-        text: button,
-        value: radio
-      };
-
-      filterList.push(newItem);
-      createFilterHtml(newItem);
-    }
-
-
-  } else {
-    // 儲存篩選條件
-    filterList.push({
-      id: id,
-      text: button,
-      value: radio
-    })
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-      createFilterHtml(element);
-    }
-  }
-
-  designerSearch(); // 搜尋
-
-  console.log('filterList', filterList);
-
-  // 切換按鈕選取狀態
-  $('.dropdown').each(function () {
-    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
-    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
-  });
-}
-
-// 新增篩選條件 HTML
-function createFilterHtml(item) {
-  let dom = `
-    <div class="me-3">
-      <span class="d-flex budget">
-        <p class="me-1">${item.text}：${item.value}</p>
-        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
-      </span>
-    </div>`;
-
-  $('.search-tab-result').append(dom);
-  $('#removeResultBtn').show();
-}
-
-// 清除單一篩選條件
-function removeBtn(element, id, val) {
-  filterList = filterList.filter(item => item.text !== val);
-
-  ; // 移除 div & active
-  $(element).closest('.me-3').remove();
-  $(`#${id}`).removeClass('active');
-  // 移除同一層級 ul 內所有 radio 的選取狀態
-  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
-
-  if (filterList.length === 0) {
-    $('#removeResultBtn').hide();
-  }
-
-  designerSearch();
-}
-
 let assignOrder = ""; // 當前排序
 
 // new, hot, recommend 排序 (預設推薦)
@@ -123,7 +12,7 @@ $(".search-btn-filter button").click(function () {
   $('.search-btn-filter').find('.active').removeClass('active');
   $(this).addClass('active');
   assignOrder = $(this).attr('id');
-  designerSearch("order_by");
+  dataSearch("order_by");
 });
 
 let page = 1; // 當前頁數
@@ -131,7 +20,7 @@ let pageSize = 18; // 每頁數量
 let isFirstLoad = true; // 初始載入
 
 // 列表篩選
-async function designerSearch(type = "") {
+async function dataSearch(type = "") {
   let url;
   $('#designerSpinner').show();
   $('#designerList').hide();
@@ -280,141 +169,4 @@ async function designerSearch(type = "") {
   }
 }
 
-designerSearch();
-
-$('.keywords').on('keydown', function (event) {
-  if (event.key === 'Enter') {
-    designerSearch();
-  }
-});
-
-let maxPagesMobile = 5; // 手機板最多顯示 5 頁
-let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
-
-// 分頁
-function setPagination(pages) {
-  let screenWidth = $(window).width();
-  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-
-  function renderPagination(currentPage) {
-    let dom = `
-      <li class="page-item" onclick="handlePagination(this, 'previous')">
-        <a class="page-link previous hidden" href="#" aria-label="Previous">
-          <span aria-hidden="true">＜</span>
-        </a>
-      </li>`;
-
-    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
-    let endPage = Math.min(startPage + maxPages - 1, pages);
-
-    if (endPage - startPage < maxPages) {
-      startPage = Math.max(endPage - maxPages + 1, 1);
-    }
-
-    for (let index = startPage; index <= endPage; index++) {
-      dom += `
-        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
-          <a class="page-link" href="#">${index}</a>
-        </li>`;
-    }
-
-    dom += `
-      <li class="page-item" onclick="handlePagination(this, 'next')">
-        <a class="page-link next" href="#" aria-label="Next">
-          <span aria-hidden="true">＞</span>
-        </a>
-      </li>`;
-
-    $('.filter-list .pagination').html(dom);
-    updateVisibility(currentPage, pages);
-  }
-
-  // 更新上頁 & 下頁的按鈕顯示狀態
-  function updateVisibility(page, pages) {
-    if (page === 1) {
-      $('.page-link.previous').addClass('hidden');
-    } else {
-      $('.page-link.previous').removeClass('hidden');
-    }
-
-    if (page === pages) {
-      $('.page-link.next').addClass('hidden');
-    } else {
-      $('.page-link.next').removeClass('hidden');
-    }
-  }
-
-  window.handlePagination = function (item, type = "") {
-    if (type === "previous" && page > 1) {
-      page--;
-    } else if (type === "next" && page < pages) {
-      page++;
-    } else if (!type) {
-      page = parseInt($(item).find('.page-link').text());
-    }
-    renderPagination(page);
-    designerSearch();
-  }
-
-  renderPagination(page);
-
-  $(window).on('resize', function () {
-    let newScreenWidth = $(window).width();
-    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
-      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
-      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-      renderPagination(page);
-    }
-  });
-}
-
-// 頁碼處理
-function handlePagination(item, type = "") {
-  if (type === "previous") {
-    // 往前一頁
-    if (page > 1) {
-      page--;
-    }
-    console.log(page);
-  } else if (type === "next") {
-    // 往後一頁
-    page++;
-    console.log(page);
-  } else {
-    // 直接點擊頁碼
-    page = parseInt($(item).find('.page-link')[0].innerText);
-  }
-
-  // 切換選取狀態
-  $('.filter-list .page-item').removeClass('active');
-  $('.filter-list .page-item').eq(page).addClass('active');
-
-  // 設定上一頁按鈕的顯示狀態
-  if (page === 1) {
-    $('.page-link.previous').addClass('hidden');
-  } else {
-    $('.page-link.previous').removeClass('hidden');
-  }
-
-  designerSearch(); // 搜尋
-}
-
-// 熱搜關鍵字搜尋
-$(".search-bar-keyword a").click(function () {
-  let keyword = $(this).text();
-  $('.keywords').val(keyword);
-  designerSearch();
-});
-
-// 全部清除
-$("#removeResultBtn").click(function () {
-  console.log('全部清除');
-  filterList.length = 0; // 清空篩選陣列
-  $('.keywords').val(''); // 清空搜尋欄位
-  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-  $('.search-tab-result').empty(); // 清空篩選條件 dom
-  // 取消選取狀態
-  $('.filter-list input[type="radio"]').prop('checked', false);
-  $('.search-tab').removeClass('active');
-  designerSearch();
-});
+dataSearch();

js/lists.js

@@ -0,0 +1,296 @@
+$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+
+// 處理 radio 選取狀態
+$('.filter-list .form-check').click(function (e) {
+  e.preventDefault();
+  $(this).find('.form-check-input').prop('checked', true);
+
+  // 取得 radio 按鈕的 label
+  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
+
+  // 取上一層 search-tab 按鈕文字
+  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
+  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
+
+  updateSelectedOptions(buttonId, buttonValue, radioLabel);
+});
+
+let filterList = []; // 篩選條件
+
+// 更新篩選狀態
+function updateSelectedOptions(id, button, radio) {
+  page = 1;
+  console.log('更新篩選狀態', button, radio);
+
+  if (filterList.length) {
+    let exists = false; // 判斷是否已存在
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+
+      // 如有重複 button 只改 radio 狀態
+      if (element.text === button) {
+        element.value = radio;
+        exists = true;
+        // 更新篩選的值
+        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
+      }
+    }
+
+    // 如果 filterList 中不存在則新增
+    if (!exists) {
+      const newItem = {
+        id: id,
+        text: button,
+        value: radio
+      };
+
+      filterList.push(newItem);
+      createFilterHtml(newItem);
+    }
+
+
+  } else {
+    // 儲存篩選條件
+    filterList.push({
+      id: id,
+      text: button,
+      value: radio
+    })
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+      createFilterHtml(element);
+    }
+  }
+
+  dataSearch(); // 搜尋
+
+  console.log('filterList', filterList);
+
+  // 切換按鈕選取狀態
+  $('.dropdown').each(function () {
+    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
+    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
+  });
+}
+
+// 新增篩選條件 HTML
+function createFilterHtml(item) {
+  let dom = `
+      <span class="me-3">
+        <span class="d-flex budget">
+          <p class="me-1">${item.text}：${item.value}</p>
+          <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+        </span>
+      </span>`;
+
+  $('.search-tab-result').append(dom);
+  $('#removeResultBtn').show();
+}
+
+// 清除單一篩選條件
+function removeBtn(element, id, val) {
+  filterList = filterList.filter(item => item.text !== val);
+
+  ; // 移除 div & active
+  $(element).closest('.me-3').remove();
+  $(`#${id}`).removeClass('active');
+  // 移除同一層級 ul 內所有 radio 的選取狀態
+  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
+
+  if (filterList.length === 0) {
+    $('#removeResultBtn').hide();
+  }
+
+  dataSearch();
+}
+
+// 鍵盤 Enter 輸入
+$('.keywords').on('keydown', function (event) {
+  if (event.key === 'Enter') {
+    dataSearch();
+  }
+});
+
+
+let maxPagesMobile = 5; // 手機板最多顯示 5 頁
+let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
+
+// 分頁
+function setPagination(pages) {
+  let screenWidth = $(window).width();
+  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+
+  function renderPagination(currentPage) {
+    let dom = `
+      <li class="page-item" onclick="handlePagination(this, 'previous')">
+        <a class="page-link previous hidden" href="#" aria-label="Previous">
+          <span aria-hidden="true">＜</span>
+        </a>
+      </li>`;
+
+    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
+    let endPage = Math.min(startPage + maxPages - 1, pages);
+
+    if (endPage - startPage < maxPages) {
+      startPage = Math.max(endPage - maxPages + 1, 1);
+    }
+
+    for (let index = startPage; index <= endPage; index++) {
+      dom += `
+        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
+          <a class="page-link" href="#">${index}</a>
+        </li>`;
+    }
+
+    dom += `
+      <li class="page-item" onclick="handlePagination(this, 'next')">
+        <a class="page-link next" href="#" aria-label="Next">
+          <span aria-hidden="true">＞</span>
+        </a>
+      </li>`;
+
+    $('.filter-list .pagination').html(dom);
+    updateVisibility(currentPage, pages);
+  }
+
+  // 更新上頁 & 下頁的按鈕顯示狀態
+  function updateVisibility(page, pages) {
+    if (page === 1) {
+      $('.page-link.previous').addClass('hidden');
+    } else {
+      $('.page-link.previous').removeClass('hidden');
+    }
+
+    if (page === pages) {
+      $('.page-link.next').addClass('hidden');
+    } else {
+      $('.page-link.next').removeClass('hidden');
+    }
+  }
+
+  window.handlePagination = function (item, type = "") {
+    if (type === "previous" && page > 1) {
+      page--;
+    } else if (type === "next" && page < pages) {
+      page++;
+    } else if (!type) {
+      page = parseInt($(item).find('.page-link').text());
+    }
+    renderPagination(page);
+    dataSearch();
+  }
+
+  renderPagination(page);
+
+  $(window).on('resize', function () {
+    let newScreenWidth = $(window).width();
+    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
+      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
+      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+      renderPagination(page);
+    }
+  });
+}
+
+// 頁碼處理
+function handlePagination(item, type = "") {
+  if (type === "previous") {
+    // 往前一頁
+    if (page > 1) {
+      page--;
+    }
+    console.log(page);
+  } else if (type === "next") {
+    // 往後一頁
+    page++;
+    console.log(page);
+  } else {
+    // 直接點擊頁碼
+    page = parseInt($(item).find('.page-link')[0].innerText);
+  }
+
+  // 切換選取狀態
+  $('.filter-list .page-item').removeClass('active');
+  $('.filter-list .page-item').eq(page).addClass('active');
+
+  // 設定上一頁按鈕的顯示狀態
+  if (page === 1) {
+    $('.page-link.previous').addClass('hidden');
+  } else {
+    $('.page-link.previous').removeClass('hidden');
+  }
+
+  dataSearch(); // 搜尋
+}
+
+// 熱搜關鍵字搜尋
+$(".search-bar-keyword a").click(function () {
+  let keyword = $(this).text();
+  $('.keywords').val(keyword);
+  dataSearch();
+});
+
+// 全部清除
+$("#removeResultBtn").click(function () {
+  console.log('全部清除');
+  filterList.length = 0; // 清空篩選陣列
+  $('.keywords').val(''); // 清空搜尋欄位
+  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+  $('.search-tab-result').empty(); // 清空篩選條件 dom
+  // 取消選取狀態
+  $('.filter-list input[type="radio"]').prop('checked', false);
+  $('.search-tab').removeClass('active');
+  dataSearch();
+});
+
+// 輸入框自動補全
+let designerKeywordList = [];
+
+async function getKeyword() {
+  console.log('getKeyword');
+  let url = '../../json/designer_keyword.json';
+
+  try {
+    const response = await axios.get(url);
+    designerKeywordList = response.data.designer_keyword_list;
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+getKeyword();
+
+$('#keywordInput').on('input', function () {
+  let input = $(this).val();
+  closeAllLists();
+  if (!input) {
+    return false;
+  }
+
+  let divList = $('#autocomplete-list');
+  for (let i = 0; i < designerKeywordList.length; i++) {
+    if (designerKeywordList[i].substr(0, input.length).toUpperCase() === input.toUpperCase()) {
+        let item = $('<div></div>');
+        item.html("<strong>" + designerKeywordList[i].substr(0, input.length) + "</strong>" + designerKeywordList[i].substr(input.length));
+        item.on('click', function() {
+            $('#keywordInput').val($(this).text());
+            closeAllLists();
+        });
+        item.on('mouseenter', function() {
+            $('#keywordInput').val($(this).text());
+        });
+        divList.append(item);
+    }
+}
+});
+
+// 清空自動補全列表
+function closeAllLists() {
+  $('.autocomplete-items').empty();
+}
+
+$(document).on('click', function (e) {
+  closeAllLists();
+});

json/designer_keyword.json

@@ -0,0 +1,455 @@
+{
+    "designer_keyword_list": [
+      "春雨時尚空間設計",
+      "周建志",
+      "界陽＆大司室內設計",
+      "馬健凱",
+      "境庭國際設計",
+      "周靖雅",
+      "豐聚室內裝修設計",
+      "黃翊峰 & 李羽芝",
+      "張馨&瀚觀室內設計",
+      "張馨",
+      "富億空間設計",
+      "陳錦樹",
+      "理揚室內裝修設計有限公司",
+      "吳函霖",
+      "比沙列室內裝修設計有限公司",
+      "張靜峰",
+      "席德設計",
+      "許鴻鈞、陳淑絹",
+      "依舍室內設計",
+      "陳永祥",
+      "得比空間設計",
+      "侯榮元",
+      "YHS DESIGN",
+      "楊煥生、郭士豪",
+      "禾洋設計團隊",
+      "謝秋貴、陳麗美",
+      "尚屋設計",
+      "鄭秋如",
+      "當代國際室內裝修設計有限公司",
+      "于懷晴",
+      "藍雅國際設計",
+      "張凱",
+      "京彩室內設計",
+      "王立崢",
+      "禾築國際設計有限公司",
+      "譚淑靜",
+      "子境室內裝修設計工程有限公司",
+      "古振宏",
+      "雲方室內設計",
+      "潘仕敏",
+      "浩室設計",
+      "邱炫達",
+      "三宅一秀 室內設計",
+      "郁琇琇",
+      "IS國際設計",
+      "陳嘉鴻",
+      "YS暘昇國際室內裝修工程有限公司",
+      "李宗育",
+      "摩登雅舍室內裝修設計有限公司",
+      "王思文&汪忠錠",
+      "水設室內設計股份有限公司",
+      "水設室內設計團隊",
+      "星葉室內裝修設計",
+      "林峰安",
+      "原境國際室內設計",
+      "邱郁雯",
+      "演拓空間室內設計",
+      "張德良、殷崇淵、楊霈瀅(寬寬)、廖文祥",
+      "澄境室內設計有限公司",
+      "鄭抿丹",
+      "千綵胤空間設計ＸDec1/2 DECO全屋設計",
+      "李千惠",
+      "京璽國際股份有限公司京築聯合室內裝修有限公司",
+      "周彥如",
+      "元典設計有限公司",
+      "彭立元",
+      "雲司國際設計",
+      "廖笠庭",
+      "元均制作",
+      "馬愷君 Maggie",
+      "朱英凱室內設計事務所",
+      "朱英凱",
+      "微自然室內裝修設計有限公司",
+      "徐以倫",
+      "亞維空間設計",
+      "簡瑋琪",
+      "安藤國際室內裝修&吳宗憲建築師",
+      "吳宗憲",
+      "語捷空間設計有限公司",
+      "陳語逸",
+      "允庭室內裝修設計有限公司",
+      "張舜淵 林術榮 李晴沛",
+      "彙禾設計",
+      "蔡林沖",
+      "映荷空間設計",
+      "羅靜如&林保秀",
+      "我思空間設計有限公司",
+      "陳佳佑",
+      "采品室內設計",
+      "盧慧珊&采品設計團隊",
+      "馥築時尚設計",
+      "湯鎮安",
+      "文儀室內裝修設計有限公司",
+      "IVY LEE 李紹瑄",
+      "廣延空間設計",
+      "陳偉立",
+      "木博士團隊&動念室內設計制作",
+      "卜冠程&木博士設計團隊",
+      "匠拓室內裝修設計",
+      "戴吉榮",
+      "極品家室內設計",
+      "林佑昶",
+      "法蘭德室內設計",
+      "吳秉霖 徐國棟 汪銘祥",
+      "恆岳空間設計",
+      "蔡岳儒",
+      "卓林室內設計有限公司",
+      "林繹寬&卓林設計團隊",
+      "築藝坊室內裝修有限公司",
+      "許梅英",
+      "里摩室內裝修設計",
+      "謝雅蓉",
+      "雋築空間設計＆睿謙室內裝修",
+      "劉倢妤 Kimico",
+      "大久空間設計",
+      "廖志偉 & 潘柏菁",
+      "優尼客空間設計有限公司",
+      "黃仲均",
+      "知域設計×一己空間制作",
+      "劉啟全、陳韻如、方人凱",
+      "大晴國際室內裝修設計股份有限公司",
+      "任依仁、張庭熙、林魁堅",
+      "舒杰室內裝修設計有限公司",
+      "陳琬婷",
+      "禾熙室內裝修設計有限公司",
+      "謝張志昇",
+      "巧軒空間設計有限公司",
+      "林志豪",
+      "祥祥室內裝修有限公司",
+      "邱珮縈",
+      "苡希創意設計有限公司",
+      "葉佳奇",
+      "柏爾室內設計事務所",
+      "涂義傑 柏爾設計團隊",
+      "玖柞設計",
+      "朱伯晟、蔡雅怡",
+      "劃家設計",
+      "劉佳川、廖應語",
+      "築誠設計",
+      "JAMES &築誠設計團隊",
+      "詹晧室內裝修設計有限公司",
+      "詹晧",
+      "沛沛國際室內設計事務所",
+      "郭沛沛",
+      "澤序空間設計有限公司",
+      "張于廷",
+      "栩邑室內裝修設計有限公司",
+      "林育正",
+      "歐米設計_意斯空間",
+      "黃恒星",
+      "艾美幸福設計有限公司",
+      "許捷甯",
+      "禾雅國際室內裝修有限公司",
+      "李柔瑩",
+      "央雨室內裝修設計",
+      "王千乾",
+      "SD_Design 空間設計",
+      "陳星龍",
+      "承炫裝修有限公司",
+      "汪孟臻",
+      "權展室內裝修設計有限公司",
+      "李雨蓁",
+      "至文室內裝修有限公司",
+      "毛至文",
+      "日常陽空間設計有限公司",
+      "謝金廷",
+      "唐林室內裝修工程有限公司",
+      "廖韋強",
+      "聯寬室內裝修有限公司",
+      "王毓婷、陳見行",
+      "藝大利國際設計",
+      "林豋瀚",
+      "黃靜文室內設計DHIA",
+      "黃靜文",
+      "澄築空間室內裝修有限公司",
+      "張躍騰",
+      "寶誠空間美學有限公司&寶誠營造有限公司",
+      "許書銘",
+      "一屋二瓦設計所",
+      "王彥歆 何佩芬",
+      "墐桐空間美學",
+      "鄧維如、張仁川",
+      "安喆空間設計",
+      "陳佳暄、林威任",
+      "丰彤設計工程有限公司",
+      "張書源",
+      "傑詩室內設計",
+      "陳奕訢",
+      "芯境設計",
+      "林芷芯",
+      "小寶優居-美好成家",
+      "小寶優居",
+      "松璞實業有限公司",
+      "松璞設計團隊",
+      "弦鉅設計有限公司",
+      "洪瑋寧",
+      "藏風空間設計",
+      "周世傑",
+      "沐熙空間設計",
+      "廖柏坤Kun",
+      "雲頂設計 YU design",
+      "張禎毅、張耕文",
+      "迪品空間設計",
+      "alaia(施芷穎)",
+      "極喀室內裝修設計有限公司",
+      "杜政坤 KEN",
+      "翊程設計",
+      "翊程設計團隊",
+      "天藤設計",
+      "劉彥偉",
+      "澤物設計",
+      "孫詩哲",
+      "WED木象室內設計有限公司",
+      "余珦瑀",
+      "恩德里室內設計",
+      "劉駿隆",
+      "東江齋設計 River Cabin D+",
+      "劉宣廷",
+      "誠鑫空間設計有限公司",
+      "洪士幃",
+      "對視室內設計工坊",
+      "李荷琳",
+      "米高室內設計",
+      "米高設計裝修團隊",
+      "希品室內設計",
+      "顏湋承",
+      "塘采設計",
+      "陳紹珩",
+      "瑞鼎設計",
+      "陳鼎岳",
+      "虹橋采卉室內設計",
+      "邱相元",
+      "ACE 空間制作所",
+      "高陞霖 設計總監／蔣漫霖 傢飾總監",
+      "寬山室內裝修設計",
+      "蔡政昇",
+      "翰陞室內裝修有限公司",
+      "黃俊皓",
+      "璞石創研空間設計",
+      "林君豪",
+      "佳舍空間設計",
+      "Steve Wang",
+      "原色國際時尚有限公司",
+      "許維玲",
+      "光舍丰計 Light House Design",
+      "周語華",
+      "歐提系統家具有限公司",
+      "Otis設計團隊",
+      "森禾室內裝修-Aj 空間設計",
+      "森禾設計團隊",
+      "昊司設計x華躍工程",
+      "蘇宣穎、汪采妮",
+      "承思室內裝修設計",
+      "吳思穎",
+      "恆域空間設計",
+      "李怡瑩/Isis",
+      "雅驛 X 締錏室內設計",
+      "王法均",
+      "寬月室內裝修設計",
+      "Evan 大雄 Rick",
+      "樂作空間設計",
+      "許伯争",
+      "羽築空間設計",
+      "徐汎羽",
+      "梁居•栲宮 空間造所",
+      "胡玟麒",
+      "沅森室內設計",
+      "賴威宇&胡柏強",
+      "云翊設計",
+      "馬顥",
+      "蘭庭設計",
+      "曹議庭",
+      "方澤設計",
+      "Patsy Liao、Kelly Cheng",
+      "蒔頤設計",
+      "楊勝富、柯淯甄",
+      "新傑創室內裝修有限公司",
+      "洪榮森",
+      "暉揚空間設計",
+      "暉揚空間設計團隊",
+      "米立奇設計",
+      "侯正祥Riki",
+      "榯榯室內設計every:moment",
+      "湯佳倫",
+      "琢隱設計有限公司",
+      "高玉凡&林暐華",
+      "澄空間室內裝修工程工作室",
+      "Yui",
+      "水源清設計",
+      "林一清",
+      "英貝設計",
+      "蔡佩諭",
+      "御品室內裝修工程行",
+      "曹國駿",
+      "光塩設計The Salt",
+      "袁筱媛Eva",
+      "橙杺設計室內裝修",
+      "鄧天杰",
+      "芬格設計工程",
+      "林京蔚",
+      "澄荷室內設計",
+      "陳奕昌",
+      "恦品室內裝修設計有限公司",
+      "恦品設計",
+      "大衛麥可",
+      "張紫嫺",
+      "藝放空間設計",
+      "陳思帆",
+      "異數空間室內設計",
+      "劉志傑",
+      "無境設計",
+      "陳東逸、傅鈺然",
+      "迦源室內裝修工程公司",
+      "陳苑珊",
+      "國彰室內設計",
+      "陳品臻",
+      "睦爅設計",
+      "睦爅設計團隊",
+      "李湘設計事務所",
+      "李湘禎",
+      "今城室內裝修設計",
+      "盧奕緁",
+      "亞舍生活室內裝修",
+      "亞舍團隊",
+      "永達空間設計",
+      "陳志偉",
+      "YMY居家美學",
+      "YMY設計團隊",
+      "尚毅室內設計工程坊",
+      "陳一中、劉俐君",
+      "嵐硯空間設計",
+      "潘文豪",
+      "鴻慶室內設計",
+      "吳承憲",
+      "境域室內裝修有限公司",
+      "楊斯涵",
+      "寬野室內設計",
+      "賴銘徽",
+      "艾嘉室內裝修設計",
+      "魏信忠",
+      "雅堂室內裝修設計",
+      "許雅閔",
+      "丰禾空間設計",
+      "潘力瑋 Leo",
+      "赭域工制",
+      "林婉婷 / 許智偉",
+      "湘頡室內設計",
+      "洪志偉",
+      "見文知桓聯合設計",
+      "王健桓",
+      "御見設計",
+      "徐御尊/徐弘昇",
+      "尚莫室內裝修設計",
+      "蔡志強",
+      "相形式所設計",
+      "相形式所設計團隊",
+      "拓新室內設計",
+      "邱奕新",
+      "李陳國際設計",
+      "Joseph Lee 李建勳",
+      "海睿森空間裝修美學設計",
+      "許育忠、方振賢",
+      "大囍室內設計",
+      "林哲弘",
+      "好築設計",
+      "賴嘉豪",
+      "本序設計",
+      "本序設計團隊",
+      "誠禾工程美學",
+      "陳韋誌、劉安庭",
+      "驀翊設計 Moooi Design",
+      "吳珮竹",
+      "渼家室內裝修有限公司",
+      "黃瓊儀",
+      "墨奕空間設計",
+      "江奕嫻",
+      "海納空間設計",
+      "管立誠",
+      "優適設計",
+      "彭新雅",
+      "創天室內裝修",
+      "鄭永政",
+      "米博空間設計",
+      "吳建儀",
+      "木白空間規劃設計工作室",
+      "劉柏均",
+      "禾蒔室內設計工作室",
+      "蕭鑠瑩",
+      "辰築國際空間規劃",
+      "張華仁",
+      "月外空間工作室",
+      "劉宇軒",
+      "元成室內裝修設計",
+      "李納德",
+      "窩百態系統家具",
+      "窩百態系統家具團隊",
+      "攸關聯合設計",
+      "湯士頡",
+      "信誼室內裝修設計",
+      "劉立馨",
+      "帝軍空間設計",
+      "李柏霆Allen、李柏宗Jerry",
+      "拾真空間設計",
+      "李真真",
+      "歐皇系統傢俱",
+      "張維鈞",
+      "堡晨室內設計",
+      "佘建融",
+      "英奇室內裝修設計工程有限公司",
+      "張琪珮",
+      "北光有限公司",
+      "白珮蓉",
+      "好品國際聯合空間設計",
+      "楊博凱 Oscar",
+      "光佐空間設計有限公司",
+      "顏光炎&光佐空間設計團隊",
+      "晴天住屋",
+      "谷田室內裝修設計",
+      "廖伊婷",
+      "日工住宅設計",
+      "日工住宅設計",
+      "森鼎設計",
+      "森鼎設計團隊",
+      "采益室內設計",
+      "謝政益/鄭惠蓮",
+      "巧翊室內設計",
+      "江品萱",
+      "梵特設計",
+      "劉育汎",
+      "有隅空間規劃所",
+      "陳珏蓉",
+      "如果設計室內裝修",
+      "陳正",
+      "築一設計",
+      "陳台勳、陳玉婕",
+      "Indahouse程作設計",
+      "羅士承",
+      "米凱伊室內設計",
+      "白富凱",
+      "森之屋室內設計",
+      "劉宸名、邱榆偉、張逸蓁",
+      "立翊室內裝修設計",
+      "劉霆文、李馨妍",
+      "龍樺裝潢設計",
+      "龍樺設計團隊",
+      "灰色大門設計",
+      "謝嘉玲",
+      "台灣綠傢俱",
+      "台灣綠傢俱",
+      "沐云設計",
+      "魏敏雲"
+    ]
+  }

videos/lists/index.html

@@ -104,12 +104,15 @@
         <div class="card search-card">
           <div class="card-body p-4">
             <div class="input-group input-group-lg mb-2">
-              <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
+              <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="videoSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
+              
+              <!-- 自動補全 -->
+              <div id="autocomplete-list" class="autocomplete-items"></div>
             </div>
 
             <div class="search-bar-keyword d-flex mt-3 pl-4">
@@ -563,7 +566,8 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
-  <script src="./js/main.js?a=2"></script>
+  <script src="../../js/lists.js"></script>
+  <script src="./js/main.js"></script>
 </body>
 
 </html>

videos/lists/js/main.js

@@ -4,114 +4,6 @@ $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-
-// 處理 radio 選取狀態
-$('.filter-list .form-check').click(function (e) {
-  e.preventDefault();
-  $(this).find('.form-check-input').prop('checked', true);
-
-  // 取得 radio 按鈕的 label
-  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
-
-  // 取上一層 search-tab 按鈕文字
-  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
-  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
-
-  updateSelectedOptions(buttonId, buttonValue, radioLabel);
-});
-
-let filterList = []; // 篩選條件
-
-// 更新篩選狀態
-function updateSelectedOptions(id, button, radio) {
-  page = 1;
-  console.log('更新篩選狀態', button, radio);
-
-  if (filterList.length) {
-    let exists = false; // 判斷是否已存在
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-
-      // 如有重複 button 只改 radio 狀態
-      if (element.text === button) {
-        element.value = radio;
-        exists = true;
-        // 更新篩選的值
-        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
-      }
-    }
-
-    // 如果 filterList 中不存在則新增
-    if (!exists) {
-      const newItem = {
-        id: id,
-        text: button,
-        value: radio
-      };
-
-      filterList.push(newItem);
-      createFilterHtml(newItem);
-    }
-
-
-  } else {
-    // 儲存篩選條件
-    filterList.push({
-      id: id,
-      text: button,
-      value: radio
-    })
-
-    for (let index = 0; index < filterList.length; index++) {
-      const element = filterList[index];
-      createFilterHtml(element);
-    }
-  }
-
-  videoSearch(); // 搜尋
-
-  console.log('filterList', filterList);
-
-  // 切換按鈕選取狀態
-  $('.dropdown').each(function () {
-    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
-    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
-  });
-}
-
-// 新增篩選條件 HTML
-function createFilterHtml(item) {
-  let dom = `
-    <span class="me-3">
-      <span class="d-flex budget">
-        <p class="me-1">${item.text}：${item.value}</p>
-        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
-      </span>
-    </span>`;
-
-  $('.search-tab-result').append(dom);
-  $('#removeResultBtn').show();
-}
-
-// 清除單一篩選條件
-function removeBtn(element, id, val) {
-  filterList = filterList.filter(item => item.text !== val);
-
-  ; // 移除 div & active
-  $(element).closest('.me-3').remove();
-  $(`#${id}`).removeClass('active');
-  // 移除同一層級 ul 內所有 radio 的選取狀態
-  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
-
-  if (filterList.length === 0) {
-    $('#removeResultBtn').hide();
-  }
-
-  videoSearch();
-}
-
 let assignOrder = ""; // 當前排序
 
 // new, hot, recommend 排序 (預設推薦)
@@ -120,7 +12,7 @@ $(".search-btn-filter button").click(function () {
   $('.search-btn-filter').find('.active').removeClass('active');
   $(this).addClass('active');
   assignOrder = $(this).attr('id');
-  videoSearch("order_by");
+  dataSearch("order_by");
 });
 
 let page = 1; // 當前頁數
@@ -128,15 +20,14 @@ let pageSize = 18; // 每頁數量
 let isFirstLoad = true; // 初始載入
 
 // 列表篩選
-async function videoSearch(type = "") {
+async function dataSearch(type = "") {
   let url;
   $('#videoSpinner').show();
   $('#videoList').hide();
 
   if (isFirstLoad) {
     // 第一次載入使用本地 JSON 文件
-     url = './json/videos_lists_data.json';
-  //  url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}&order_by=new`;
+    url = './json/videos_lists_data.json';
   } else {
     // 後續使用 API (預設排序為 recommend)
     url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;
@@ -218,8 +109,6 @@ async function videoSearch(type = "") {
           tagsHtml += `<span>${tag}</span>`;
         });
 
-        console.log('tagsHtml', tagsHtml);
-
         resultHtml += `
           <div class="col-md-4 mb-4">
             <a href="${item.DesignerLink}">
@@ -257,141 +146,4 @@ async function videoSearch(type = "") {
   }
 }
 
-videoSearch();
-
-$('.keywords').on('keydown', function (event) {
-  if (event.key === 'Enter') {
-    videoSearch();
-  }
-});
-
-let maxPagesMobile = 5; // 手機板最多顯示 5 頁
-let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
-
-// 分頁
-function setPagination(pages) {
-  let screenWidth = $(window).width();
-  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-
-  function renderPagination(currentPage) {
-    let dom = `
-      <li class="page-item" onclick="handlePagination(this, 'previous')">
-        <a class="page-link previous hidden" href="#" aria-label="Previous">
-          <span aria-hidden="true">＜</span>
-        </a>
-      </li>`;
-
-    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
-    let endPage = Math.min(startPage + maxPages - 1, pages);
-
-    if (endPage - startPage < maxPages) {
-      startPage = Math.max(endPage - maxPages + 1, 1);
-    }
-
-    for (let index = startPage; index <= endPage; index++) {
-      dom += `
-        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
-          <a class="page-link" href="#">${index}</a>
-        </li>`;
-    }
-
-    dom += `
-      <li class="page-item" onclick="handlePagination(this, 'next')">
-        <a class="page-link next" href="#" aria-label="Next">
-          <span aria-hidden="true">＞</span>
-        </a>
-      </li>`;
-
-    $('.filter-list .pagination').html(dom);
-    updateVisibility(currentPage, pages);
-  }
-
-  // 更新上頁 & 下頁的按鈕顯示狀態
-  function updateVisibility(page, pages) {
-    if (page === 1) {
-      $('.page-link.previous').addClass('hidden');
-    } else {
-      $('.page-link.previous').removeClass('hidden');
-    }
-
-    if (page === pages) {
-      $('.page-link.next').addClass('hidden');
-    } else {
-      $('.page-link.next').removeClass('hidden');
-    }
-  }
-
-  window.handlePagination = function (item, type = "") {
-    if (type === "previous" && page > 1) {
-      page--;
-    } else if (type === "next" && page < pages) {
-      page++;
-    } else if (!type) {
-      page = parseInt($(item).find('.page-link').text());
-    }
-    renderPagination(page);
-    videoSearch();
-  }
-
-  renderPagination(page);
-
-  $(window).on('resize', function () {
-    let newScreenWidth = $(window).width();
-    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
-      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
-      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
-      renderPagination(page);
-    }
-  });
-}
-
-// 頁碼處理
-function handlePagination(item, type = "") {
-  if (type === "previous") {
-    // 往前一頁
-    if (page > 1) {
-      page--;
-    }
-    console.log(page);
-  } else if (type === "next") {
-    // 往後一頁
-    page++;
-    console.log(page);
-  } else {
-    // 直接點擊頁碼
-    page = parseInt($(item).find('.page-link')[0].innerText);
-  }
-
-  // 切換選取狀態
-  $('.filter-list .page-item').removeClass('active');
-  $('.filter-list .page-item').eq(page).addClass('active');
-
-  // 設定上一頁按鈕的顯示狀態
-  if (page === 1) {
-    $('.page-link.previous').addClass('hidden');
-  } else {
-    $('.page-link.previous').removeClass('hidden');
-  }
-
-  videoSearch(); // 搜尋
-}
-
-// 熱搜關鍵字搜尋
-$(".search-bar-keyword a").click(function () {
-  let keyword = $(this).text();
-  $('.keywords').val(keyword);
-  videoSearch();
-});
-
-// 全部清除
-$("#removeResultBtn").click(function () {
-  console.log('全部清除');
-  filterList.length = 0; // 清空篩選陣列
-  $('.keywords').val(''); // 清空搜尋欄位
-  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-  $('.search-tab-result').empty(); // 清空篩選條件 dom
-  // 取消選取狀態
-  $('.filter-list input[type="radio"]').prop('checked', false);
-  $('.search-tab').removeClass('active');
-  videoSearch();
-});
+dataSearch();