Form Select をフィルタつきにカスタマイズしたい

Question

実現したいこと

タイトル通り Form で選択肢が多くなりがちな Select にフィルタをつけたい

参考イメージ

前提

・React など使用せずにフォームのSelectにフィルタをつけたい
・Django で使用予定

発生している問題

丸一日検索して調べたのですが添付画像の React を使用した情報しか見つからず
JavaScript やライブラリが必要になるとは思うのですが
実装するための方法を知るために下記がわかりましたら助けて欲しいです。
・正式名称はあるのか？
・どんなキーワードで検索したら良いのか

試したこと

キーワード [ select フィルタ JavaScript ] などあれやこれや変えて検索しましたが前述のとおりです、、、

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

見にくい画像を見る限り、それは <select> ではなく <datalist> に近いものではないでしょうか。
<datalist>: HTML データリスト要素

UIの業界では「コンボボックス」などと呼びますね。

Comments

[iiike]

非常に役立つ回答ありがとうございます。
業界で長い経験があっても作業範囲によっては全く知識がなく取り掛かりも厳しいことがあります。
datalist コンボボックスの両方で調査していきます。

Answer 2

どういうUIを想定しているかわかりませんが
optionをfilterして非表示にすればよいのでは？
昔のIEとかは非表示にできませんでしたがいまのモダンブラウザなら問題ないはずです

参考

<script>
document.addEventListener('input',({target})=>{
  if(target.matches('#search')){
    const v=target.value;
    s1.querySelectorAll('option').forEach(x=>{
      const flg=x.value!="" && !new RegExp(v).test(x.value);
      x.toggleAttribute('hidden',flg);
    });
  }
});
</script>
<input id="search">
<select id="s1">
<option value="">--</option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="c1">c1</option>
</select>