AngularJs - Search Textbox with Reset Icon

by Kushal Jayswal

HTML

<div ng-app="myApp" ng-controller="Ctrl" class="search-container">
  <input id="search" type="text" placeholder="Search..." ng-model="searchField" ng-keyup="$event.which == 13 && searchField.length > 2 ? searchMe(searchField) : null">

  <label for="search">
    <button type="button" class="search-icon" ng-if="!searchResultFlag || (searchField.length == 0 && !searchReset(searchField))" ng-click="searchMe(searchField)" ng-disabled="!(searchField.length > 2)">

      Search
      <!-- "Search" text should be replaced with icon -->
    </button>

    <button class="reset-icon" type="button" ng-click="searchReset(searchField)" ng-if="searchResultFlag && !searchField.length == 0">

      X
      <!-- "Search" text should be replaced with icon -->
    </button>
  </label>
  <br>
  <br> {{searchField}}
</div>

CSS

body > div {
  margin: 0 auto;
  padding: 50px 0;
  text-align: center;
}

input[type=text] {
  padding: 15px;
}

.search-icon,
.reset-icon {
  color: #fff;
  background: green;
  padding: 15px;
  border: 1px solid #666;
  cursor: pointer;
}

.search-icon[disabled] {
  pointer-events: none;
  background: #999;
}

.reset-icon {
  background: red;
}

JavaScript

angular.module('myApp', [])
  .controller("Ctrl", function($scope) {
    $scope.searchResultFlag = false;
    $scope.searchMe = function(term) {
      $scope.searchResultFlag = true;
      alert("fired");
    }
    $scope.searchReset = function(term) {
      $scope.searchField = "";
      $scope.searchResultFlag = false;
    }
  });