Howto add delete icon to search input field?


How may I add a delete icon to a search input field as on the following screenshot?

Cannot tap/click a clear search icon inside an input label

Check our this codepen.


Perfect!!! Works like a charm!!! :slight_smile: :slight_smile: :slight_smile:


One last thing I’ve noticed on that:
When I run the code on a real iPad device, pressing the icon lets the iPad keyboard hide and show up again - but the input field is no longer focused.

How to fully hide the keyboard on pressing the button?


If you have the ionic keyboard installed, you can use cordova.plugins.Keyboard.close


I also experimented with similar search input and noticed there is a problem if there is a “label” tag around input.

I am using a search input in header:

see codepen:

I’d like to have a cross button inside the input field to clear the
phrase, which doesn’t work using ng-model as can be seen in the codepen

If I put the button outside the label tag, the clear JS function is called as expected:

<label class="item-input-wrapper">
          <i class="icon ion-ios7-search placeholder-icon"></i>
          <input type="search"                     
    <button class="button button-icon icon ion-ios7-close-empty"

Could this be a BUG?

found another post related to this problem: Cannot tap/click a clear search icon inside an input label


hello you nedd to change <label class="item-input-wrapper"> for <div class="item-input-wrapper">.

It’s work for me!

Attach example:

 <div class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" ng-model="searchval" placeholder="Buscar Blooky"  ng-enter="searchBackend();">
            <i ng-if="searchval.length" ng-click="clearSearch()" class="icon ion-ios-close placeholder-icon"></i>  
             <button class="button button-clear" style="font-family: 'Bariol-Regular';" ng-enter="searchBackend();" ng-click="searchBackend()">

I hope I’ve helped