Howto add delete icon to search input field?

1

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

2

Check our this codepen.

2 Likes
3

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

4

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?

5

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

6

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: http://codepen.io/anon/pen/FhgdD

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
example.

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"                     
            placeholder="..."
            autocorrect="off"
            ng-model="phrase.txt"
          >
    </label>
    <button class="button button-icon icon ion-ios7-close-empty"
      ng-disabled="!phrase.txt.length"
      ng-click="clearSearch()"
      ></button>

Could this be a BUG?

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

8

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>  
          </div>
             <button class="button button-clear" style="font-family: 'Bariol-Regular';" ng-enter="searchBackend();" ng-click="searchBackend()">
                Buscar
             </button>
        </div>

I hope I’ve helped