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); + } } }