Question

我对angular JS完全陌生。我有一个带有关键字输入框的表单。我需要使用angularJS md-autocomplete向此输入框添加自动完成功能。我现有的html代码如下所示：

<div class="container formHolder" ng-controller="AppController as ctrl">
    <form class="form-horizontal" name="myForm" novalidate>
            <h4 class="page-header" style="text-align: center;"><b>Keyword Search</b></h4>
            <div class="form-group row" style="padding-left: 2%;padding-right:2%; padding-top: 3%;">
                <label for="keyword" class="control-label col-sm-3 labels">Keyword <sup style="color: red">*</sup></label>
                <div class="col-sm-9">
                    <input type="text" ng-class="{errorBorder: myForm.keyword_name.$touched && myForm.keyword_name.$invalid}" class="form-control" ng-model="keyword_name" ng-keyup="total(keyword_name)" name="keyword_name" id="keyword" placeholder="Enter Keyword" required>
                    <!-- Md auto complete to be attached to this input here -->
                </div>
            </div>

            <div class="form-group row" style="padding-left: 2%;padding-right:2%; padding-bottom: 3%">
                <div class="col-sm-9">
                    <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary justify-content-center align-content-between" style="margin-right: 10px"><i class="material-icons" style="vertical-align:middle;">search</i>Search</button>
                </div>
            </div>
        </form>
</div>

我想使用AngularJS添加自动完成功能，因此我使用了md-autocomplete，如下面的代码片段所示。

Output with md-autocomplete tag

<div class="container formHolder" ng-controller="AppController as ctrl">
    <form class="form-horizontal" name="myForm">
            <h4 class="page-header" style="text-align: center;"><b>Keyword Search</b></h4>
        <div class="form-group row" style="padding-left: 2%;padding-right:2%; padding-top: 3%;">
            <label for="keyword" class="control-label col-sm-3 labels">Keyword <sup style="color: red">*</sup></label>
            <div class="col-sm-9">
       
                <!-- Md auto complete to be attached to this input here -->
                <md-autocomplete
                        md-input-name="keyword"
                        md-selected-item="ctrl.selectedItem"
                        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                        md-search-text="ctrl.searchText"
                        md-selected-item-change="ctrl.selectedItemChange(item)"
                        md-items="item in ctrl.querySearch(ctrl.searchText)"
                        md-item-text="item.display"
                        md-min-length="1"
                        placeholder="Keyword Search">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item}}</span>
                    </md-item-template>
                </md-autocomplete>
            </div>
        </div>
            <div class="form-group row" style="padding-left: 2%;padding-right:2%; padding-bottom: 3%">
                <div class="col-sm-9">
                    <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary justify-content-center align-content-between" style="margin-right: 10px"><i class="material-icons" style="vertical-align:middle;">search</i>Search</button>
                </div>
            </div>
        </form>
</div>

但是这种替换改变了我输入框的样式。我希望我的输入框像第一幅图所示。因此，有一种方法可以保留我的输入框并为其添加自动完成功能，以使样式保持不变。还是有一种方法可以设置md-autocomplete元素的样式，使其与第一张图片一样？

请帮助我。

是否可以将md-autocomplete链接到表单输入框

0 个答案: