Feat search empty query

.gitignore

@@ -44,4 +44,4 @@ Thumbs.db
 
 # output files
 demo/dist
-bundles
+bundles

demo/src/app/pages/modules/search/search.page.ts

@@ -6,12 +6,14 @@ import { AlertModal } from "../../../modals/alert.modal";
 const exampleStandardTemplate = `
 <sui-search placeholder="Example Search..."
             [hasIcon]="hasIcon"
+            [allowEmptyQuery]="allowEmptyQuery"
             [options]="options"
             [searchDelay]="0"
             (resultSelected)="alertSelected($event)"></sui-search>
 
 <div class="ui segment">
     <sui-checkbox [(ngModel)]="hasIcon">Has icon?</sui-checkbox>
+    <sui-checkbox [(ngModel)]="allowEmptyQuery">Allow empty query?</sui-checkbox>
 </div>
 `;
 
@@ -57,6 +59,18 @@ export class SearchPage {
                     description: "Sets whether or not the search displays an icon.",
                     defaultValue: "true"
                 },
+                {
+                    name: "allowEmptyQuery",
+                    type: "boolean",
+                    description: "Sets whether the search element display result with empty query.",
+                    defaultValue: "false"
+                },
+                {
+                    name: "resetQueryOnChange",
+                    type: "boolean",
+                    description: "Sets whether the query is reset if options change.",
+                    defaultValue: "true"
+                },
                 {
                     name: "options",
                     type: "T[]",
@@ -165,6 +179,7 @@ export class SearchExampleStandard {
         "Yellow", "Zebra"];
 
     public hasIcon:boolean = true;
+    public allowEmptyQuery:boolean = true;
 
     public get options():string[] {
         return SearchExampleStandard.standardOptions;

src/modules/search/components/search.ts

@@ -73,6 +73,23 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
     @Input()
     public hasIcon:boolean;
 
+    // Sets whether the query is reset if options change.
+    @Input()
+    public set resetQueryOnChange(resetQueryOnChange:boolean) {
+        this.searchService.resetQueryOnChange = resetQueryOnChange;
+    }
+
+    // Sets whether the search element display result with empty query.
+    @Input()
+    public set allowEmptyQuery(allowEmptyQuery:boolean) {
+        this._allowEmptyQuery = allowEmptyQuery;
+        this.searchService.allowEmptyQuery = allowEmptyQuery;
+    }
+    public get allowEmptyQuery():boolean {
+        return this._allowEmptyQuery;
+    }
+
+    private _allowEmptyQuery:boolean;
     private _placeholder:string;
 
     // Gets & sets the placeholder text displayed inside the text input.
@@ -102,7 +119,7 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
         // Initialise a delayed search.
         this.searchService.updateQueryDelayed(query, () =>
             // Set the results open state depending on whether a query has been entered.
-            this.dropdownService.setOpenState(this.searchService.query.length > 0));
+            this.dropdownService.setOpenState(this.searchService.query.length > 0 || this.allowEmptyQuery));
     }
 
     @Input()
@@ -193,6 +210,8 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
 
         this._searchClasses = true;
         this.hasIcon = true;
+        this.allowEmptyQuery = false;
+        this.resetQueryOnChange = true;
         this.retainSelectedResult = true;
         this.searchDelay = 200;
         this.maxResults = 7;
@@ -238,7 +257,7 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
     }
 
     private open():void {
-        if (this.searchService.query.length > 0) {
+        if (this.searchService.query.length > 0 || this.allowEmptyQuery) {
             // Only open on click when there is a query entered.
             this.dropdownService.setOpenState(true);
         }

src/modules/search/services/search.service.ts

@@ -60,6 +60,8 @@ export class SearchService<T, U> {
     }
 
     private _query:string;
+    // Allows the query to be empty when the options change.
+    public resetQueryOnChange:boolean;
     // Allows the empty query to produce results.
     public allowEmptyQuery:boolean;
     // How long to delay the search for when using updateQueryDelayed. Stored in ms.
@@ -99,6 +101,8 @@ export class SearchService<T, U> {
 
         // Set default values and reset.
         this.allowEmptyQuery = allowEmptyQuery;
+        this._query = "";
+        this.resetQueryOnChange = true;
         this.searchDelay = 0;
         this.reset();
     }
@@ -203,6 +207,10 @@ export class SearchService<T, U> {
         this._results = [];
         this._resultsCache = {};
         this._isSearching = false;
-        this.updateQuery("");
+        if (this.resetQueryOnChange || !this.query) {
+            this.updateQuery("");
+        } else {
+            this.updateQuery(this.query);
+        }
     }
 }