◆ datalist で良かった気もする
◆ 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 の操作がメインになると再選択のしやすさ的に向いてません