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.

chip-list.js

@@ -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
                             )
                     ),