如何在此搜索框中显示更多结果

Question

我希望在搜索栏中输入内容时显示多行搜索建议。它只显示一个结果，我该怎么做。

anular 7 cli

top-bar.component.ts

 result : any;
 searchText; 

 ngOnInit() { 
    this.serverService.getAllProductData().subscribe(
      (response:Response)=>{ 
        this.result = response;    
        console.log(this.result);  
      } 
    ); 
  }

top-bar.component.html

 <form action="#" class="search" >
        <div class="input">
           <input type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search your product">
           <ul class="results" *ngFor="let data of result | filter:searchText"  >
                    <a><b>Product : {{data.productName}}</b>, <br>Category : {{data.productCategory}} Price :{{data.productPrice}} , ProductId :{{data.productId}}  </a>
    <a style="display:none">{{data.productDescription}} </a>
                 </li>  
           </ul>
      </div>
       <div class="submit">
    <button>
    <i class="icofont icofont-search-alt-1"></i>
    </button>
    </div>
    </form>

top-bar.component.css

 .search input:focus + .results { display: block } 

    .search .results {
        display: none;.......
    } 
    .search .results li { display: block }


    .search .results li:first-child { margin-top: -1px }


    .search .results li:first-child:before, .search .results li:first-child:after {
        display: block;
        content: '';
       ..........
    } 

    .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }


    .search .results li:last-child { margin-bottom: -1px }


    .search .results a {
        display: block;
        position: relative;
        ............
    }


    .search .results a:before {
        content: '';
        ..........
    }

Showing Result Like this image