入力できる select 作ったけど
◆ datalist で良かった気もする
◆ datalist は補完なので選択肢をフィルタできるけど 再選択のときに一旦消さないと他の候補出せない
◆ datalist は補完なので選択肢をフィルタできるけど 再選択のときに一旦消さないと他の候補出せない
select だけど自由入力もしたいなと思ってこんなコンポーネントを作りました
仕組みは input と select を用意して select は透明化して選択ボタンの上に乗せます
選択ボタンが押されると実際は select が押されて選択肢が出ます
select の変更イベントで input を上書きするので select で選択できるのに input で直接入力もできるというものです
作った後に気づいたのですが datalist とかいうタグ ありましたよね
これで良かったです
ただこっちはあくまで補完候補なので input に入力してる文字列にマッチするものしか選択できません
変更するときは一旦全部消さないといけないです
フィルタ付き select がほしいなら datalist が向いてますが select の操作がメインになると再選択のしやすさ的に向いてません
仕組みは input と select を用意して select は透明化して選択ボタンの上に乗せます
選択ボタンが押されると実際は select が押されて選択肢が出ます
select の変更イベントで input を上書きするので select で選択できるのに input で直接入力もできるというものです
<!doctype html>
<input-select>
<option>111111</option>
<option>aa</option>
<option>bbb</option>
<option>cccc</option>
<option>d</option>
<option>abcdefg</option>
</input-select>
<script>
customElements.define("input-select", class extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
.container {
position: relative;
display: inline-flex;
}
input {
position: relative;
z-index: 2;
}
#select {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
left: 0;
}
</style>
<div class="container">
<input id="value">
<button>選択</button>
<select id="select"></select>
</div>
`
const elems = {
value: this.shadowRoot.getElementById("value"),
select: this.shadowRoot.getElementById("select"),
}
for (const elem of this.children) {
if (elem.tagName === "OPTION") {
elems.select.append(elem.cloneNode(true))
}
}
elems.select.onchange = eve => {
elems.value.value = eve.target.value
eve.target.value = ""
}
this._elems = elems
}
get value() {
return this._elems.value.value
}
set value(value) {
this._elems.value.value = value
}
})
</script>
作った後に気づいたのですが datalist とかいうタグ ありましたよね
<!doctype html>
<input list="items">
<datalist id="items">
<option>111111</option>
<option>aa</option>
<option>bbb</option>
<option>cccc</option>
<option>d</option>
<option>abcdefg</option>
</datalist>
これで良かったです
ただこっちはあくまで補完候補なので input に入力してる文字列にマッチするものしか選択できません
変更するときは一旦全部消さないといけないです
フィルタ付き select がほしいなら datalist が向いてますが select の操作がメインになると再選択のしやすさ的に向いてません