Hooking into Search button press on soft keyboard Vs form submit

Hi everyone - i’m a newbie app developer… Ionic is my first attempt, and it’s going well… nice job! I’m trying to write for Android and IOS.

My problem… I have search input box at the top, with a submit button:

	<button type="submit" class="button button-clear" ui-sref="wherever">
			<i class="icon ion-search" ></i>
	</button>

	<label class="item-input-wrapper">
	    	<i class="icon ion-search placeholder-icon"></i>
	    	<input type="search" placeholder="Search" ng-model="query" ng-change="something()" />
	</label>

This works perfectly:

  1. user taps into the input field, soft keyboard appears with search button icon (in android, anyway… not tested ios)
  2. user types query which is shown in input field as expected
  3. user clicks on search icon on soft keyboard to cancel it
  4. user clicks on search button defined in my html above
  5. ui-sref goes to the correct state

is it possible to hook into the search icon button press on the soft keyboard, ie. get rid of step 4 completely. Seems ugly needing one tap to exit the soft keyboard, then another to hunt down the search button and do the submit.

I’m not sure if this is even an ionic question, or possibly a cordova question… I have not installed any cordova keyboard plug-ins as yet. I’m not clear how installing the ionic cordova keyboard plug will help, as it seems to be just about showing/hiding/disabling scroll, and not dealing with events eg. Search button press triggered from it ?

I’ve google around, and I have only found low-level javascript solutions that hook into push button events… not sure if this the recommended ionic/angular way… if someone could just steer me in the right general direction… would really appreciate it.

1 Like

Why not do a “live search” instead of having the user tap a search field? Basically, as they user types, the app queries the info? Then, as the items are listed, the user taps one and goes to a new view You can do this with ng-change and an appropriate method in the controller.

Alternatively, if you use the Ionic keyboard plugin, you can tie the “Search” button to the close method of the keyboard. That way you get rid of the keyboard in one step.