diff --git a/chip-list.js b/chip-list.js index 11e599b..fcd9153 100644 --- a/chip-list.js +++ b/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 = ""; }),