Choices.jsでセレクトボックスを複数作る・動的に作る

概要

フィヨルドブートキャンプでChoices.jsを使ったセレクトボックスを作ることになったが、Choices.jsの記事が少なく、複数作ったり動的にセレクトボックスを作ったりしている記事がなかったので、残しておきたい。

参考

@GaramMasala29さんのqiitaの記事を参考にさせていただきました。 非常にわかりやすかったです！ ありがとうございました！

あとは公式を参考にした。

Choices.jsについて

以下のような文字検索ができたり、他にもオプションをつけることで様々なことができるライブラリ。

複数のセレクトボックスにChoices.jsを適用する

複数のセレクトボックスにChoices.jsを適用する場合、私はquerySelectorAllを使ってidを全て取得し、for文を使用することで、各セレクトボックスにChoices.jsを適用できた。

f.collection_select :book_id, all_books, :first, :last, {}, { id: 'js-book-select' }

document.addEventListener('DOMContentLoaded', () => {
  const bookSelectCount = document.querySelectorAll('#js-book-select').length
  const elements = document.querySelectorAll('#js-book-select')
  for (let i = 0; i < bookSelectCount; i++) {
    // eslint-disable-next-line no-new
    new Choices(elements[i], {
      allowHTML: true,
      searchResultLimit: 20,
      searchPlaceholderValue: '検索ワード',
      noResultsText: '一致する情報は見つかりません',
      itemSelectText: '選択',
      shouldSort: false
    })
  }
})

動的にセレクトボックスを作る

動的にセレクトボックス場合もquerySelectorAllを使うことで解決できた。 動的に作る場合は、querySelectorAllで取得した最後の要素に対してChoices.jsを適用することでセレクトボックスを作ることができた。

document.addEventListener('DOMContentLoaded', () => {
    const bookSelectCount = document.querySelectorAll('#js-book-select').length
      const elements = document.querySelectorAll('#js-book-select')
      for (let i = 0; i < bookSelectCount; i++) {
        // eslint-disable-next-line no-new
        new Choices(elements[i], {
          allowHTML: true,
          searchResultLimit: 20,
          searchPlaceholderValue: '検索ワード',
          noResultsText: '一致する情報は見つかりません',
          itemSelectText: '選択',
          shouldSort: false
        })
      }
    $('.reference-books-form__add').on('cocoon:after-insert', () => {
    const elements = document.querySelectorAll('#js-book-select')
    const element = elements[elements.length - 1]
    if (element) {
      return new Choices(element, {
        allowHTML: true,
        searchResultLimit: 20,
        searchPlaceholderValue: '検索ワード',
        noResultsText: '一致する情報は見つかりません',
        itemSelectText: '選択',
        shouldSort: false
      })
    }
  })
})

出来上がったセレクトボックスはこちら。