Question

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

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

如何在角度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
}

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

1 个答案: