よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素

<selectlist>
  <option>りんご</option>
  <option>バナナ</option>
  <option>ぶどう</option>
</selectlist>

<selectlist>
  <button type="selectlist">
    <label>好きなフルーツ</label>
    <selectedoption></selectedoption>
  </button>
  <listbox>
    <option>りんご</option>
    <option>バナナ</option>
    <option>ぶどう</option>
  </listbox>
</selectlist>
 
<style>
  selectlist button {
    display: flex;
    flex-direction: column;
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
  }
 
  selectlist selectedoption {
    font-size: 24px;
    font-weight: bold;
  }
 
  selectlist listbox {
    border: dodgerblue 1px solid;
    box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);
    margin-top: 4px;
  }
 
  selectlist option {
    padding: 8px;
    border-bottom: 1px solid #ccc;
  }
 
  selectlist option:hover {
    background-color: #eee;
  }
 
  /* 
   * :checked は現在選択されているオプションを表す擬似クラスです。
   * multiple をサポートするために :selected ではなく :checked が使用されている。
   * https://github.com/openui/open-ui/issues/827
   */
  selectlist option:checked {
    background-color: dodgerblue;
    color: #fff;
  }
</style>

<selectlist class="combobox">
  <listbox>
    <input type="search" />
    <div class="listbox-options" tabindex="-1">
      <option>apple</option>
      <option>banana</option>
      <option>orange</option>
      <option>pineapple</option>
      <option>strawberry</option>
    </div>
  </listbox>
</selectlist>
 
<script>
  const combobox = document.querySelector(".combobox");
  const listbox = combobox.querySelector("listbox");
  // すべての選択可能なオプションのリスト
  const options = [...listbox.querySelectorAll("option")].map(
    (option) => option.textContent,
  );
  const optionsContainer = listbox.querySelector(".listbox-options");
  const input = combobox.querySelector("input");
 
  // リストボックスが開閉したときのイベント
  listbox.addEventListener("toggle", (e) => {
    // リストボックスが開いたとき
    if (e.newState === "open") {
      input.focus();
    }
  });
 
  input.addEventListener("input", (e) => {
    // 一旦すべてのオプションを削除
    optionsContainer.innerHTML = "";
 
    // input の値に一致するオプションをフィルタリング
    const value = e.target.value.toLowerCase();
    const filteredOptions = options.filter((option) => option.includes(value));
 
    // フィルタリングした結果がない場合は、"No results found" を表示
    if (filteredOptions.length === 0) {
      const optionElement = document.createElement("option");
      optionElement.textContent = "No results found";
      optionsContainer.appendChild(optionElement);
    } else {
      // フィルタリングした結果を表示
      filteredOptions.forEach((option) => {
        const optionElement = document.createElement("option");
        optionElement.textContent = option;
        optionsContainer.appendChild(optionElement);
      });
    }
  });
</script>