实现友链搜索功能

1
<!-- 搜索框 -->
2
      <div class="mb-4">
3
        <div class="relative">
4
          <input
5
            type="text"
6
            id="friend-search"
7
            placeholder="搜索友链..."
8
            class="w-full px-4 py-2.5 pl-10 rounded-lg border border-(--line-divider) bg-(--card-bg) text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-(--primary) focus:ring-2 focus:ring-(--primary)/20 transition-all duration-200"
9
          />
10
          <Icon
11
            name="material-symbols:search"
12
            class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 text-xl"
13
          />
14
          <button
15
            id="clear-search"
16
            class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors hidden"
17
            aria-label="清除搜索"
18
          >
19
            <Icon name="material-symbols:close" class="text-lg" />
20
          </button>
21
        </div>
22
      </div>
23

24
      <!-- 无搜索结果提示 -->
25
      <div id="no-results" class="hidden text-center py-12">
26
        <Icon
27
          name="material-symbols:search-off-rounded"
28
          class="text-5xl text-neutral-300 dark:text-neutral-600 mx-auto mb-3"
29
        />
30
        <p class="text-neutral-500 dark:text-neutral-400">未找到匹配的友链</p>
31
        <p class="text-sm text-neutral-400 dark:text-neutral-500 mt-1">请尝试其他关键词</p>
32
      </div>

1
    if (!customElements.get("friend-filter")) {
2
        // 其他代码
3
    }
4
    // 友链搜索功能
5
    (function() {
6
      // 确保 DOM 加载完成后再执行
7
      function initSearch() {
8
        const searchInput = document.getElementById('friend-search');
9
        const clearBtn = document.getElementById('clear-search');
10
        const noResults = document.getElementById('no-results');
11
        const cards = document.querySelectorAll('.friend-card');
12

13
        if (!searchInput || cards.length === 0) {
14
          return; // DOM 还未加载完成，稍后重试
15
        }
16

17
        let debounceTimer;
18

19
        // 防抖函数
20
        function debounce(func, delay) {
21
          return function(...args) {
22
            clearTimeout(debounceTimer);
23
            debounceTimer = setTimeout(() => func.apply(this, args), delay);
24
          };
25
        }
26

27
        // 搜索过滤逻辑
28
        function performSearch(query) {
29
          const searchTerm = query.toLowerCase().trim();
30
          let visibleCount = 0;
31

32
          cards.forEach((card) => {
33
            const title = (card.querySelector('.font-bold')?.textContent || '').toLowerCase();
34
            const desc = (card.querySelector('.line-clamp-1')?.textContent || '').toLowerCase();
35
            const url = (card.href || '').toLowerCase();
36

37
            if (
38
              searchTerm === '' ||
39
              title.includes(searchTerm) ||
40
              desc.includes(searchTerm) ||
41
              url.includes(searchTerm)
42
            ) {
43
              card.style.display = '';
44
              card.classList.add('animate-fade-in-up');
45
              visibleCount++;
46
            } else {
47
              card.style.display = 'none';
48
              card.classList.remove('animate-fade-in-up');
49
            }
50
          });
51

52
          // 显示/隐藏无结果提示
53
          if (noResults) {
54
            if (visibleCount === 0 && searchTerm !== '') {
55
              noResults.classList.remove('hidden');
56
            } else {
57
              noResults.classList.add('hidden');
58
            }
59
          }
60
        }
61

62
        // 绑定搜索事件（带防抖）
63
        searchInput.addEventListener('input', debounce(function(e) {
64
          const query = e.target.value;
65
          performSearch(query);
66

67
          // 显示/隐藏清除按钮
68
          if (clearBtn) {
69
            if (query.length > 0) {
70
              clearBtn.classList.remove('hidden');
71
            } else {
72
              clearBtn.classList.add('hidden');
73
            }
74
          }
75
        }, 200));
76

77
        // 绑定清除按钮
78
        if (clearBtn) {
79
          clearBtn.addEventListener('click', function() {
80
            searchInput.value = '';
81
            performSearch('');
82
            this.classList.add('hidden');
83
            searchInput.focus();
84
          });
85
        }
86
      }
87

88
      // 监听 DOM 加载完成事件
89
      if (document.readyState === 'loading') {
90
        document.addEventListener('DOMContentLoaded', initSearch);
91
      } else {
92
        initSearch();
93
      }
94
    })();