MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added ability to hide search results via a property. Escape key now closes search dialog. Searching resets the show search results to ensure everything goes back to normal.

Browse Source
This commit is contained in:
Matt Mo 2020-09-30 10:45:11 -07:00
parent 9167c9a4dd
commit ee2c5ae707
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
chip-list.js
View File

@ -62,6 +62,7 @@ class ChipList extends IgniteElement {
input: null,
searchBox: null,
searching: false,
showSearchResults: true,
searchResults: [
{ id: 502, corporation: "Starbucks", content: "Starbucks #1, Spokane WA" },
{ id: 503, corporation: "Starbucks", content: "Starbucks #2, Spokane WA" }
@ -123,9 +124,18 @@ class ChipList extends IgniteElement {
}
})
.on("keydown", (e) => {
//If the escape key is pressed stop searching until something else happens.
if (e.key == "Escape") {
this.searching = false;
e.preventDefault();
e.stopPropagation();
return;
}
//If we are not searching and a key was pressed, open the search box.
if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
this.searching = true;
this.showSearchResults = true;
} else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {
//Don't allow input if we reached the max number of items.
e.preventDefault();
@ -139,10 +149,13 @@ class ChipList extends IgniteElement {
.class("shadow d-flex flex-column justify-content-center p-2")
.style("background-color", "#fff")
.child(
new span(this.searchPlaceholder).class("mt-2").hide(this.searchResults, value => { return value != null && value.length > 0; }),
new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults], (searchResults, showSearchResults) => {
//Dont show the placeholder if we have search results, or if we are not showing search results.
return (searchResults != null && searchResults.length > 0) || !showSearchResults;
}),
new list(this.searchResults, item => {
return new div(item.content).class("search-result p-2").onClick(() => this.searchResultClick(item));
}),
}).hide(this.showSearchResults, value => { return !value; }),
this.searchFooter
)
),