Add clear (“x”) button for resetting input fields

It would be cool if Ionic had a “clear” / “x” button that could appear inside inputs. I suppose it could be implemented as an AngularJS directive.

Kind of like how jQuery Mobile has a data-clear-btn="true" attribute that can be applied to input elements:

http://demos.jquerymobile.com/1.4.0/textinput/#Text

Any plans for this?

6 thoughts on “Add clear (“x”) button for resetting input fields

  1. JGx, you can unsubscribe from the thread at the bottom.

    and the input clear button is really simple to do with some css plus angular.

    <input type="search" 
           placeholder="Filter contacts..." 
           ng-model="search">
    <button ng-if="search.length"
            class="input-button button button-icon ion-android-close"
            ng-click="clearSearch()">
    </button>
    .button.button-icon.input-button {
      position: absolute;
      right: 0;
      top: 5px;
      color: #bbb;
    }

    We could definitely consider adding this sort of CSS to Ionic.

  2. @salqadri – This works for me. X button appears based on angular’s ng-if directive. Input get’s focus after tapping the X button thanks to ionic’s on-touch directive. It also works if you use a div instead of a label tag.

    <label class="item-input-wrapper">
    
       <i class="icon ion-ios-search-strong placeholder-icon"></i>
    
       <input type="search"
              placeholder="Search"
              ng-model="search.string">
    
        <a ng-if="search.string != ''" 
           on-touch="search.string=''">
    
           <i class="icon ion-ios-close placeholder-icon"></i>
    
        </a>
    
    </label>
    
  3. @cosnofski Thanks! Made it into a directive. Can be used like,

    <ion-list>
        <search-bar ng-model="search"></search-bar>
        ...
    </ion-list>
    

    controller would contain,

    let search = {text:""};`

    directive:

    angular.module('foo')
    .directive('searchBar', [
        () => {
        return {
            scope: {
                ngModel: '='
            },
            require: ['?ngModel'],
            restrict: 'E',
            replace: true,
            template: `<div class="item item-input-inset">
                            <label class="item-input-wrapper">
                                <i class="icon ion-ios-search-strong placeholder-icon"></i>
                                <input type="search"
                                       placeholder="Search"
                                       ng-model="ngModel.text">
    
                                <a ng-if="ngModel.text != ''"
                                   on-touch="ngModel.text=''">
    
                                    <i class="icon ion-ios-close placeholder-icon"></i>
                                </a>
                            </label>
                        </div>
                        `,
    
            link: (scope, element, attrs)=>{
    
            }
        };
    }])