Angular4中如何选中搜索结果点击元素并移除同级元素

我来帮你搞定这个需求！其实实现起来很简单，分几步就能完成：

1. 模板部分调整 #

首先修正你代码里的小错误（原代码的<ul= "SearchTest"应该是<ul id="SearchTest"），然后给每个搜索结果的<li>添加点击事件，把当前选中的产品对象传进去：

<div id="search-component">
  <input 
    type="text" 
    class="searchBox" 
    placeholder="Search here..." 
    #searchBox 
    id="searchBox" 
    name="searchBox" 
    (keyup)="searchproducts(searchBox.value)" 
  />
  <ul id="SearchTest" class="search-result">
    <li *ngFor="let product of products" (click)="selectProduct(product)">
      {{ product.name }} <!-- 这里替换成你实际要显示的产品字段，比如product.title等 -->
    </li>
  </ul>
</div>

2. 组件类逻辑实现 #

在你的组件.ts文件里，需要做两件事：获取搜索框的DOM引用、编写选中产品的处理方法：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  products: any[] = []; // 存储搜索结果的数组
  @ViewChild('searchBox') searchBox!: ElementRef<HTMLInputElement>; // 获取搜索框的引用

  // 你的searchproducts方法，负责根据输入值获取搜索结果
  searchproducts(searchValue: string) {
    // 这里是你原有的搜索逻辑，比如调用接口或者过滤数据，把结果赋值给this.products
    // 示例：this.products = 你的搜索结果数组;
  }

  // 处理产品选中的方法
  selectProduct(selectedProduct: any) {
    // 1. 将选中的产品内容赋值到搜索框
    this.searchBox.nativeElement.value = selectedProduct.name; // 同样替换成实际字段

    // 2. 清空搜索结果数组，这样剩余的<li>就会被Angular自动移除
    this.products = [];
  }
}

额外说明 #

• 如果你的产品对象有多个字段需要显示在搜索框（比如名称+ID），可以在selectProduct里拼接字符串：this.searchBox.nativeElement.value = ${selectedProduct.name} (${selectedProduct.id})``
• 如果你不想用@ViewChild，也可以把搜索框的模板引用变量直接传到点击事件里（不过更推荐把逻辑放在组件类中）：

  <li *ngFor="let product of products" (click)="searchBox.value = product.name; products = []">
    {{ product.name }}
  </li>
  

  这种方式直接在模板里处理逻辑，适合简单场景，但复杂逻辑还是放在组件类更易维护。

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