Search submit button text: Search or Go

Ionic Framework ionic-v3
1

I’ve got a search bar in my header and I’d like the iOS keyboard to show the blue “Search” or “Go” instead of the usual “return” button. Normally this is accomplished by just putting type="search" into the HTML but it doesn’t seem to be working here, even though the ion-searchbar does so automatically. What am I missing here? Thanks – E

<ion-header>
  <ion-navbar>

      <ion-buttons end>
          <button ion-button icon-only (tap)="showOptions($event,'discover')"  *ngIf="!hideOptionsButton">
            <ion-icon name="options"></ion-icon>
          </button>
      </ion-buttons>

    <form (ngSubmit)="submitSearch($event)">
      <ion-searchbar [(ngModel)]="searchQuery" [ngModelOptions]="{standalone: true}" [showCancelButton]="true" placeholder="Global Search"
      (ionCancel)="clearSearch($event)"
      (ionInput)="menuFocusMode($event)"
      (ionFocus)="menuFocusMode($event)">
      </ion-searchbar>
    </form>

  </ion-navbar>
</ion-header>
2

Is it rude to bump this back onto the front page? Still looking for a solution for this.

3

I’m looking for a solution for this too. Would be useful if anyone has solved this?

4

I am still stumped. Everything I’ve read says this should work.

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Search</ion-title>
  </ion-navbar>

  <ion-toolbar>
    <form (ngSubmit)="submitSearch($event)">
      <ion-searchbar
      placeholder="Global Search"
      [(ngModel)]="searchQuery"
      [ngModelOptions]="{standalone: true}"
      [showCancelButton]="activeSearch"
      (ionCancel)="clearSearch()">
      </ion-searchbar>
    </form>
  </ion-toolbar>

</ion-header>

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0


global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    ios-sim    : 5.0.11
    Node       : v6.9.1
    npm        : 3.10.8
    OS         : macOS High Sierra
    Xcode      : Xcode 9.3 Build version 9E145

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

> cordova plugin ls
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-headercolor 1.0 "HeaderColor"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.3.0 "Cordova sqlite storage plugin"
es6-promise-plugin 4.2.2 "Promise"
5

@bok04, did you ever find a solution?

6

No I never did. I find it puzzling.

7

@ebellempire I think I have fixed it!

Try adding action="." into your form tag and let me know if this works for you.

3 Likes
8

Thanks, that works!

I guess it even makes sense too, but it’s odd that it wasn’t documented or even found in other forum posts. Oh well, it’s here now. Cheers.