Change Ionic searchbar box to underline only

Ionic Framework ionic-v3
1

Hi all. I’m trying to change a search bar box to a line. The code has an input field with a bottom border, but I’m trying to create a search bar dropdown. However, instead of a search ‘box’, I am hoping I can do it with just a line like the input field had. Here is the relevant portion of the code:

<ion-content padding>
  <ion-navbar>
  </ion-navbar>
    <ion-card style="padding: 24px;">
      <ion-card-content>
        <ion-grid>
          <ion-row>
            <ion-item col-2 style="width:150px; border-bottom: 1px solid #f4f4f4">
              <ion-label floating>keyword(s)</ion-label>
              <ion-input type="text"></ion-input>      
              <!-- <ion-searchbar no-border (ionInput)="getItems($event)"></ion-searchbar>
              <ion-list>
                <ion-item *ngFor="let item of items">
                  {{ item }}
                </ion-item>
              </ion-list> -->
          </ion-item>
        </ion-row>
        ...
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>

The commented out code is what I’m adding for the search bar. Without that code, the input field functions as an input field should. When the code is added, the input field still functions as normal. The search bar and the dropdown list don’t appear or run. When I comment out the input line, the floating label becomes static and the input line doesn’t work, and the search bar and dropdown still don’t appear. However, if I comment out both the label line and the input line, the search bar and dropdown list appear and the search bar filter works, so I know that my code for the search bar (and its data) is correct. I’ve tried adding a z-index to the search bar, but that didn’t work.

So, does anyone have any idea of how to do what I want to do?

Thanks!