diff --git a/.gitignore b/.gitignore
index 465409354..67158654a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,4 +44,4 @@ Thumbs.db
# output files
demo/dist
-bundles
\ No newline at end of file
+bundles
diff --git a/demo/src/app/pages/modules/search/search.page.ts b/demo/src/app/pages/modules/search/search.page.ts
index 230efdd18..bb475505e 100644
--- a/demo/src/app/pages/modules/search/search.page.ts
+++ b/demo/src/app/pages/modules/search/search.page.ts
@@ -6,12 +6,14 @@ import { AlertModal } from "../../../modals/alert.modal";
const exampleStandardTemplate = `
Has icon?
+ Allow empty query?
`;
@@ -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;
diff --git a/src/modules/search/components/search.ts b/src/modules/search/components/search.ts
index d6dc2cfc7..0f22cc257 100644
--- a/src/modules/search/components/search.ts
+++ b/src/modules/search/components/search.ts
@@ -73,6 +73,23 @@ export class SuiSearch 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 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 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 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);
}
diff --git a/src/modules/search/services/search.service.ts b/src/modules/search/services/search.service.ts
index fb6122fdd..a6db71032 100644
--- a/src/modules/search/services/search.service.ts
+++ b/src/modules/search/services/search.service.ts
@@ -60,6 +60,8 @@ export class SearchService {
}
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 {
// 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 {
this._results = [];
this._resultsCache = {};
this._isSearching = false;
- this.updateQuery("");
+ if (this.resetQueryOnChange || !this.query) {
+ this.updateQuery("");
+ } else {
+ this.updateQuery(this.query);
+ }
}
}