Javascript 如何将站点中的地址链接到搜索栏？

因此，我的仪表板上有6种不同的咖啡类型，每种都有自己独特的页面地址。如果我搜索咖啡名称，我希望它能让我了解特定咖啡类型的详细信息，即提交搜索后的唯一url

以下是搜索栏的代码段：

<div class = "search">
        <form action = "/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type = "submit">Submit</button>
        </form>
</div>

提交

有很多方法可以做到这一点。一种选择是编写一个小函数作为事件侦听器，用于搜索栏中发生的所有更改，并相应地显示匹配结果。使用选择该选项后，您可以将其作为指向所需唯一链接的

标记。这可以是硬编码的，也可以是使用JSON动态的，所以我在一些帮助下解决了这个问题。如果已经存在要进入每个特定项目的按钮事件，可以简单地将现有的click事件用作操作

附加代码的第一位：（在service.ts文件中找到）

需要从创建的.ts文件导入咖啡

添加第3位：（在app.component.html中找到）

添加的最后一位：（在dashboard.component.html中找到）

咖啡
{{coffee.name}

---

id=“{coffee.name}}”是调用前面所有函数的基本部分。

能否提供一个简单的侦听函数示例和标记的使用？是否可以创建一个switch语句，然后在按钮“submit”事件中使用它？

selectedCoffee = new BehaviorSubject<Coffee>(null);

setCoffee(name: string){
    let coffee = COFFEES.find(coffee => coffee.name === name);    
    this.selectedCoffee.next(coffee);
  }

constructor(private coffeeService: CoffeeService){} 

  searchInput: string;

search(){
    this.coffeeService.setCoffee(this.searchInput);
  }

<div class = "search" id = "{{coffee.name}}">
        <form autocomplete = "off" action = "/action_page.php" class = "form-inline"> 
            <input type = "text" class = "form-control typeahead border-success" name="searchBar" placeholder = "Search here..." [(ngModel)]="searchInput">
            <button class = "btn btn-outline-success mx-2" (click)="search()">Search</button>
        </form>
</div>

ngOnInit() {
    this.coffeeService.selectedCoffee.subscribe(coffee => this.goToCoffee(coffee));
  }

goToCoffee(coffee: Coffee){    
    if(coffee){
      let view = document.getElementById(coffee.name);      
      if(view){
        view.click();
      }
    }
  }

<h1 align = "center">The Coffees</h1>

<div class = "grid grid-pad">
 <div class = "container">
  <div class = "row">
   <a *ngFor = "let coffee of coffees" class = "col-4" routerLink = "/detail/{{coffee.name}}">
    <div class = "module coffee d-flex justify-content-center mx-2" id="{{coffee.name}}">
      <h4 align = "center">{{coffee.name}}</h4>
    </div>
   </a>
   </div>
  </div>
</div>