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

Question

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

客户基本上希望有一个类似谷歌的搜索（一个元素可见）。将表单提交到 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');

     }
      }       
  );

}

组件.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>

标签： angular