从文本框中搜索实时数据库并将其显示在select元素中

Question

组件已完成但客户端不满意。目前，我使用文本框在实时数据库中搜索产品，并在具有数据库ID和名称的select元素中显示结果，形成每个选择选项的值和显示文本，如下所示：

客户基本上想要谷歌搜索（一个元素可见）。在将表单提交到mysql数据库时，我使用所选的ID。是否有一种更简单的方法，不需要我改变很多（承认......我是懒惰的）。

后端是发送JSON的Django。

这是我当前的组件代码：

 eventSearchSupplier(value){
 let v=value.trim();
 if (v.length<2){return false;}

 //search here
    this.suppliersservice.searchsupplier(v).subscribe(
      data => { 
          this.suppliers = data['detail'];

          this.suppliers.unshift({'id':0,'name':'Select'});


      },
      (err: HttpErrorResponse) => {

         if (err.error instanceof Error) {
             //A client-side or network error occurred.         
      this.commonfunctions.showNotificationMessage('',909,'error');
     } else {
         this.commonfunctions.showNotificationMessage(err.error.detail,err.status,'error');

     }
      }       
  );

}

component.html

      <div class="col-md-3">
        <label>Suppliers</label>
        <input type="text" class="text-line" placeholder="Enter Name to Search" (input)="eventSearchSupplier($event.target.value)">

        </div>

        <div class="col-md-3">
        <label>&nbsp;</label>


        <select  class="form-control supplier" formControlName="provider" >
            <option *ngFor="let supplier of suppliers" value="{{supplier.id}}">{{supplier.name}}</option>

        </select>

    </div>