Cleaned up chip list control further.

chip-list.js

@@ -45,6 +45,7 @@ class ChipList extends IgniteElement {
     get properties() {
         return {
             items: [],
+            itemConverter: (item) => new text(item),
             itemsMax: Number.MAX_SAFE_INTEGER,
             placeholder: null,
             editing: false,
@@ -55,9 +56,9 @@ class ChipList extends IgniteElement {
             searchLoading: false,
             searchResults: null,
             searchResultConverter: (result) => new text(result),
-            onSearch: null,
-            onSearchDelay: 200,
-            onSearchCallback: null,
+            searchDelay: 200,
+            searchCallback: null,
+            searchFunction: null,
             documentListener: null,
             freeForm: true,
             chipBackground: null,
@@ -82,20 +83,18 @@ class ChipList extends IgniteElement {
                     //Chips
                     new list(this.items, (item) => {
                         return new Chip()
-                            .id(item.id)
-                            .property("color", item.chipColor ? item.chipColor : this.chipColor)
-                            .property("background", item.chipBackground ? item.chipBackground : this.chipBackground)
                             .property("readOnly", this.readOnly)
                             .property("onDelete", () => {
                                 this.items = this.items.filter(needle => needle != item);
                                 this.changed = true; //Make sure changed flag was set. 
                             })
-                            .child(item.content);
+                            .child(new converter(item, this.itemConverter));
                     }),
 
                     //Text input
                     new div()
                         .class("input-container")
+                        .style("min-width", "1em")
                         .show(this.editing)
                         .child(
                             new div()
@@ -182,11 +181,20 @@ class ChipList extends IgniteElement {
                                     }
 
                                     //If we are searching and we have a on search function invoke it.
-                                    if (this.searching && this.onSearch) {
-                                        if (this.onSearchCallback) {
-                                            clearTimeout(this.onSearchCallback);
+                                    if (this.searching && this.searchFunction) {
+                                        //Clear a pending search
+                                        if (this.searchCallback) {
+                                            clearTimeout(this.searchCallback);
                                         }
-                                        this.onSearchCallback = setTimeout(() => this.onSearch(this, this.input.textContent.trim()), this.onSearchDelay);
+
+                                        //Schedule a new search
+                                        this.searchCallback = setTimeout(async () => {
+                                            this.searchLoading = true;
+
+                                            this.searchResults = await this.searchFunction(this.input.textContent.trim());
+
+                                            this.searchLoading = false;
+                                        }, this.searchDelay);
                                     }
                                 })
                         )
@@ -202,6 +210,7 @@ class ChipList extends IgniteElement {
                         this.items = null;
                         this.editing = false;
                         this.searching = false;
+                        this.changed = true;
                         this.input.blur();
                         this.input.innerHTML = "";
                     }),