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

Added ability to limit the results if wanted. Added a on enter callback and prevented enter from adding new lines.

Browse Source
This commit is contained in:
MattMo 2023-10-25 13:42:37 -07:00
parent 18901d2115
commit 7a950f307d
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
search-select.js
View File

@ -23,7 +23,9 @@ class SearchSelect extends IgniteElement {
searchDelay: 200,
searchMaxHeight: "15em",
searching: false,
documentListener: null
documentListener: null,
maxResults: -1,
onEnter: null
};
}
@ -58,6 +60,24 @@ class SearchSelect extends IgniteElement {
.ref(this.inputElement)
.onFocus(() => this.onFocus())
.on("keydown", (e) => {
//If the enter key is pressed, prevent it from doing anything.
if (e.key == "Enter") {
e.preventDefault();
e.stopPropagation();
if (this.onEnter) {
this.onEnter(e.target.textContent);
}
this.searching = false;
this.inputElement.blur();
this.inputElement.textContent = null;
e.preventDefault();
e.stopPropagation();
return;
}
//If the escape key is pressed stop searching until something else happens.
if (e.key == "Escape") {
this.searching = false;
@ -132,6 +152,7 @@ class SearchSelect extends IgniteElement {
this.searching = false;
//Dispatch native change event so this acts like a native control
this.dispatchEvent(new Event("change"));
})
)
@ -216,7 +237,12 @@ class SearchSelect extends IgniteElement {
});
}
this.results = results;
//Limit the results if needed
if (this.maxResults != -1) {
this.results = results.slice(0, this.maxResults);
} else {
this.results = results;
}
}
}