ユーザー編集画面の所属企業にインクリメンタルサーチを使えるようにする

app/assets/stylesheets/_common-imports.sass

@@ -57,6 +57,7 @@
 // helpers
 //////////////////////////////
 
+@import choices.js/public/assets/styles/choices.min.css
 @import "modules/**/*"
 @import "helpers/**/*"
 

app/assets/stylesheets/modules/_choices.sass

@@ -0,0 +1,11 @@
+body
+  .choices__inner
+    display: inline-flex
+    align-items: center
+    +padding(vertical, 0)
+    background-color: #fafafa
+    border-color: $input-border
+  .choices.is-focused .choices__inner
+    background-color: $base
+  .choices[data-type*=select-one] .choices__inner
+    padding-bottom: 0

app/javascript/company-select.js

@@ -0,0 +1,11 @@
+import Choices from 'choices.js'
+
+document.addEventListener('DOMContentLoaded', () => {
+  return new Choices('#js-company-select', {
+    removeItemButton: true,
+    searchResultLimit: 10,
+    searchPlaceholderValue: '検索ワード',
+    noResultsText: '一致する情報は見つかりません',
+    itemSelectText: '選択'
+  })
+})

app/javascript/packs/application.js

@@ -70,3 +70,4 @@ import '../generation-users.js'
 import '../learning-completion-message.js'
 import '../practices-pages.js'
 import '../users-questions.js'
+import '../company-select.js'

app/views/users/form/_company.html.slim

@@ -1,6 +1,9 @@
 .form-item
   = f.label :company, class: 'a-form-label'
-  .a-button.is-md.is-secondary.is-select.is-block
-    = f.collection_select :company_id, all_companies_with_empty, :id, :name, {}
+  .is-md.is-secondary.is-select.is-block
+    = f.collection_select :company_id, all_companies_with_empty, :id, :name, {}, { id: 'js-company-select' }
   .a-form-help
-    p アドバイザー、研修生、就職した卒業生は登録。
+    p
+      | 企業で利用しているアドバイザー、研修生は登録。
+      br
+      | 就職した卒業生、メンターは個人情報にあたるため、希望者のみ登録。

package.json

@@ -9,6 +9,7 @@
     "@rails/webpacker": "5.4.3",
     "@sindresorhus/slugify": "^2.1.0",
     "autosize": "^4.0.2",
+    "choices.js": "^10.1.0",
     "css-loader": "^5.0.1",
     "dayjs": "^1.10.4",
     "escape-html": "^1.0.3",

yarn.lock

@@ -1009,6 +1009,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -2148,6 +2155,15 @@ character-parser@^2.2.0:
   dependencies:
     is-regex "^1.0.3"
 
+choices.js@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/choices.js/-/choices.js-10.1.0.tgz#034a40b7aa82e2a38f19ff8fae5bbfa6047862f4"
+  integrity sha512-NtrFt7c7ZQEGmkWsAV+EHynJhADWoZ82JEfg1+vQ9MMKJD4Ax2rzYPxXe+Q64i0HgUgWG/XTN3gN2pB8UFFFlA==
+  dependencies:
+    deepmerge "^4.2.2"
+    fuse.js "^6.5.3"
+    redux "^4.1.2"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
@@ -2803,6 +2819,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3710,6 +3731,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.5.3.tgz#7446c0acbc4ab0ab36fa602e97499bdb69452b93"
+  integrity sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6871,6 +6897,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+redux@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
+  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"