Можно ли связать md-autocomplete с полем ввода формы

Question

Я совершенно новичок в угловой 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, как показано в фрагменте кода ниже.

Вывод стэг md-autocomplete

<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, чтобы он выглядел так, как на первом изображении?

Пожалуйста, помогите мне в этом.