making icon search search-as-you-type

Author: adamjohnwright

projects/website-angular/src/app/community/icon-lib/icon-lib.component.html

@@ -17,7 +17,7 @@ <h1>Icon Library</h1>
           type="text"
           placeholder="Search icons..."
           [value]="searchQuery"
-          (input)="searchQuery = $any($event.target).value"
+          (input)="onSearchInput($event)"
           (keydown)="onSearchKeydown($event)"
         />
         @if (searchQuery) {

projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { PageLayoutComponent } from '../../page-layout/page-layout.component';
 import { IconService, IconCategory, IconEntry } from '../../../services/icon.service';
 
@@ -51,7 +53,7 @@ interface ParsedReference {
   templateUrl: './icon-lib.component.html',
   styleUrl: './icon-lib.component.scss'
 })
-export class IconLibComponent implements OnInit {
+export class IconLibComponent implements OnInit, OnDestroy {
   view: View = 'grid';
   loading = true;
   error = false;
@@ -72,13 +74,25 @@ export class IconLibComponent implements OnInit {
   detailLoading = false;
   parsedReferences: Map<string, ParsedReference[]> = new Map();
 
+  // Debounced search
+  private searchSubject = new Subject<string>();
+  private destroy$ = new Subject<void>();
+
   constructor(
     private iconService: IconService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
 
   ngOnInit() {
+    this.searchSubject.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.searchIcons();
+    });
+
     this.loadCategories();
     const iconId = this.route.snapshot.paramMap.get('id');
     if (iconId) {
@@ -88,6 +102,11 @@ export class IconLibComponent implements OnInit {
     }
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   get maxPage(): number {
     return Math.ceil(this.totalEntries / ICONS_PER_PAGE);
   }
@@ -252,6 +271,12 @@ export class IconLibComponent implements OnInit {
     img.parentElement?.appendChild(fallback);
   }
 
+  onSearchInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.searchQuery = value;
+    this.searchSubject.next(value);
+  }
+
   onSearchKeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       this.searchIcons();