You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
976 B
Plaintext
48 lines
976 B
Plaintext
search-box
|
|
input.search(placeholder="Search...", onkeydown="{_handleKeyDown}")
|
|
|
|
script.
|
|
let lastKnownQuery;
|
|
|
|
Object.assign(this, {
|
|
_handleKeyDown: (event) => {
|
|
switch (event.code) {
|
|
case "ArrowDown":
|
|
this.trigger("selectionDown");
|
|
break;
|
|
case "ArrowUp":
|
|
this.trigger("selectionUp");
|
|
break;
|
|
case "Enter":
|
|
this.trigger("confirm");
|
|
break;
|
|
case "Escape":
|
|
this.trigger("cancel");
|
|
break;
|
|
}
|
|
|
|
let searchInput = this.root.querySelector(".search");
|
|
|
|
if (searchInput.value !== lastKnownQuery) {
|
|
lastKnownQuery = searchInput.value;
|
|
this.trigger("queryChanged", searchInput.value);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
})
|
|
|
|
style(scoped, type="scss").
|
|
.search {
|
|
border: 0px;
|
|
padding: 17px 9px;
|
|
font-size: 21px;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: #d99d9d;
|
|
}
|
|
} |