如何实现Angular搜索栏输入时逐词缩小搜索范围的功能

实现搜索栏输入每个单词时，逐步缩小搜索范围至匹配所有关键词的结果，附上现有代码寻求修复方案。

1. 模板变量不匹配：HTML中管道绑定的是searchText，但输入框用[(ngModel)]="filterTerm"双向绑定，导致管道无法获取实时输入的搜索词，筛选功能失效。
2. 匹配字段错误：当前管道仅匹配item.id，但实际要搜索的是产品名称product.name，方向完全错误。
3. 实时筛选逻辑冲突：checkSearch函数在keyup时就触发路由跳转，打断了实时筛选的交互，输入过程中就跳转到详情页，无法看到下拉筛选结果。

1. 修正搜索管道（匹配产品名称+多关键词逐步筛选） #

修改管道逻辑，改为匹配产品名称，确保所有输入的关键词都能在名称中找到，实现输入每个单词后逐步缩小范围：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText.trim()) return items;

    // 拆分搜索词并过滤空字符串
    const searchWords = searchText.toLowerCase().split(' ').filter(word => word.length > 0);

    // 筛选出包含所有关键词的产品（匹配名称）
    return items.filter(item => {
      const productName = item.name.toLowerCase();
      return searchWords.every(word => productName.includes(word));
    });
  }
}

2. 修正组件逻辑（分离实时筛选与跳转逻辑） #

调整checkSearch函数，仅在回车时触发路由跳转，输入过程中只保留实时筛选的交互：

click() {
  if (!this.filterTerm?.trim()) {
    alert("输入字段不能为空");
    return;
  }
  this.productService.search.next(this.filterTerm);
  this.router.navigate(['/product-details', this.filterTerm]);
}

checkSearch(event: any) {
  // 仅在回车时处理跳转，其他keyup事件不触发路由
  if (event.key === "Enter") {
    if (!this.filterTerm?.trim()) {
      alert("输入字段不能为空");
      return;
    }
    this.productService.search.next(this.filterTerm);
    this.router.navigate(['/product-details', this.filterTerm]);
  }
  // 实时筛选由ngModel双向绑定自动更新，无需额外赋值
}

3. 修正模板绑定（对齐变量） #

把管道的搜索词参数改为filterTerm，确保和输入框的双向绑定变量一致：

<ul class="nav navbar-nav ms-auto"  id="myNavbar">
  <li class="nav-item nav-link" *ngIf="router.url!=='/Frontpage'">
    <div class="search" *ngIf="this.x !== 1">
      <i class="fa fa-search" (click)="click()"></i>
      <input 
        type="text" 
        name="searchInput" 
        [(ngModel)]="filterTerm" 
        (keyup)="checkSearch($event)" 
        class="form-control"  
        placeholder="搜索游戏"
      >
      <ul>
        <!-- 把searchText换成filterTerm，匹配ngModel绑定的变量 -->
        <li *ngFor="let product of allProducts | searchFilter: filterTerm">
          {{ product.name }}
        </li>
      </ul>
    </div>
  </li>
</ul>

现在输入关键词时，每输入一个单词，下拉列表会自动筛选出包含所有已输入关键词的产品，逐步缩小范围；回车或点击搜索图标时，才会跳转到详情页。

内容的提问来源于stack exchange，提问作者BILAL