Updated advanced search to remove the "Search" button, and perform the search as the user types.

client/src/modules/helpdesk/helpdesk-search-base.component.ts

@@ -240,10 +240,17 @@ export default abstract class HelpDeskSearchBaseComponent {
         }
     }
 
+    private onAdvancedSearchValueChanged() {
+        this.initiateSearch();
+    }
+
     removeSearchTag(tagIndex: number): void {
         this.queries.splice(tagIndex, 1);
 
-        if (this.queries.length === 0) {
+        if (this.queries.length > 0) {
+            this.initiateSearch();
+        }
+        else {
             this.clearSearch();
             this.advancedSearch = false;
         }

client/src/modules/helpdesk/helpdesk-search-cards.component.html

@@ -56,7 +56,7 @@
             <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
             <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
         </select>
-        <input ng-model="query.value" autocomplete="off">
+        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
         <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
@@ -67,9 +67,6 @@
                 ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
         <ias-icon icon="new_thin"></ias-icon>
     </ias-button>
-    <ias-button id="advanced-search-button" ng-click="$ctrl.initiateSearch()"
-                ng-bind="'Placeholder_Search' | translate">
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/helpdesk/helpdesk-search-table.component.html

@@ -68,7 +68,7 @@
             <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
             <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
         </select>
-        <input ng-model="query.value" autocomplete="off">
+        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
         <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
@@ -79,9 +79,6 @@
                 ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
         <ias-icon icon="new_thin"></ias-icon>
     </ias-button>
-    <ias-button id="advanced-search-button" ng-click="$ctrl.initiateSearch()"
-                ng-bind="'Placeholder_Search' | translate">
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/peoplesearch/peoplesearch-base.component.ts

@@ -86,6 +86,10 @@ abstract class PeopleSearchBaseComponent {
         this.fetchData();
     }
 
+    private onAdvancedSearchValueChanged() {
+        this.initiateSearch();
+    }
+
     private onSearchTextChange(newValue: string, oldValue: string): void {
         if (newValue === oldValue) {
             return;
@@ -98,7 +102,10 @@ abstract class PeopleSearchBaseComponent {
     removeSearchTag(tagIndex: number): void {
         this.queries.splice(tagIndex, 1);
 
-        if (this.queries.length === 0) {
+        if (this.queries.length > 0) {
+            this.initiateSearch();
+        }
+        else {
             this.clearSearch();
             this.advancedSearch = false;
         }

client/src/modules/peoplesearch/peoplesearch-cards.component.html

@@ -58,7 +58,7 @@
             <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
             <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
         </select>
-        <input ng-model="query.value" autocomplete="off">
+        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
         <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
@@ -69,9 +69,6 @@
                 ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
         <ias-icon icon="new_thin"></ias-icon>
     </ias-button>
-    <ias-button id="advanced-search-button" ng-click="$ctrl.initiateSearch()"
-                ng-bind="'Placeholder_Search' | translate">
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/peoplesearch/peoplesearch-table.component.html

@@ -72,7 +72,7 @@
             <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
             <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
         </select>
-        <input ng-model="query.value" autocomplete="off">
+        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
         <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
@@ -83,9 +83,6 @@
                 ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
         <ias-icon icon="new_thin"></ias-icon>
     </ias-button>
-    <ias-button id="advanced-search-button" ng-click="$ctrl.initiateSearch()"
-                ng-bind="'Placeholder_Search' | translate">
-    </ias-button>
 </div>
 
 <div class="search-info-container">