角度2中的多个搜索框和下拉搜索框

Question

我想在我的 Angular 2 应用程序中实现一个搜索框。一旦用户开始在搜索框中输入一些名称，就应该调用一些 Java REST 服务，它应该获取与在搜索文本框中输入的名称匹配的所有名称。请注意，没有按钮，只要用户开始输入，结果就会自动出现。 java REST 服务已经存在。我只需要在用户开始输入时调用 java REST 服务并将结果作为列表返回。例如：- 如果我输入 Jam，那么名称以 Jam 开头的所有用户都应该作为列表出现在搜索框中。 比如james、jamini、jamia等等。

一旦出现姓名列表，用户可以点击其中一个姓名，他的信息应该会加载到当前页面中。

如何在 Angular 2 中实现这种类型的搜索框？是否有任何表单搜索框机制？谁能给我一些指导

<h3>Find By Brand Name</h3>
<div>
    <form (ngSubmit)="onSubmit()">
        <table>
            <tr>
                <td id="brand" name="brand" class="form-group" name="wgtmsr" id="wgtmsr">
                    <label for="brand">VIN</label> <br>
                    <select (click)="callVin()" name="wgtmsr" id="wgtmsr">
                        <option class="wgtmsr"  class="form-control" 
                        *ngFor="let car of cars"   
                         id="brand" name="brand" ngDefaultControl
                                value= {{car.brand}}  [(ngModel)]="car1.brand">
                            {{car.brand}}
                        </option>
                    </select>
                </td>
                <td class="form-group" name="wgtmsr" id="wgtmsr">
                        <label for="year">Year</label> <br>
                        <input name="wgtmsr" id="wgtmsr" type="text" class="form-control" id="year" required
                        [(ngModel)]="car1.year" name="year"> 
                </td>
            </tr>
            <tr>

                <td class="form-group" name="wgtmsr" id="wgtmsr">
                        <label  for="color">Color</label> <br>
                        <input required minlength="4" name="wgtmsr" id="wgtmsr" type="text" class="form-control" id="color" required
                        [(ngModel)]="car1.color" name="color"> 
                </td>


                <td  class="form-group" name="wgtmsr" id="wgtmsr">
                            <label for="vin"> Vin Code</label><br>
                            <angular2-multiselect [data]="dropdownList" [(ngModel)]="car1.country" 
                                                    [settings]="settings" 
                                                    (onSelect)="onItemSelect($event)"
                                                    (onDeSelect)="OnItemDeSelect($event)" 
                                                    (onSelectAll)="onSelectAll($event)" 
                                                    (onDeSelectAll)="onDeSelectAll($event)" name="skills">
                            </angular2-multiselect>     
                        </td>
            </tr>

            <tr>
                <td>
                    <div class="btn-group">
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>

Answer 1

我建议您使用 (ngModelChange)="onInputChange() 将您的 ngModel 绑定拆分为输入和输出绑定。因为 [(ngModel)] 正是这样做的。它将输入和输出都打包到一个绑定中。但就您而言，它并不真正符合您的需求。

在您的代码中，您可以实现该功能并调用您的 api：

onInputchange() {
    //call rest-api
}