https://careers.kctcs.edu/assets/sites/controllers/call_to_action/…/education_select_controller-433c01b0.js

1import {Controller} from '@hotwired/stimulus'
2import {FetchUtils} from 'common/fetch_utils'
3
4export default class extends Controller {
5  static values = {hiddenFieldSelector: String}
6  connect() {
7    const optionsUrl = this.element.dataset.optionsUrl
8    if (!this.element.classList.contains('selectized')) {  // this is because of how we clone the education html, without it we will sometimes get 2 dropdowns instead of 1
9      $ctj(this.element).selectize({
10        valueField: 'id',
11        labelField: 'text',
12        searchField: 'text',
13        options: [],
14        create: false,
15        load: (query, callback) => {
16          if (query.length) {
17            fetch(URI(optionsUrl).setQuery('term', query).toString(), {
18              headers: FetchUtils.jsonCsrfHeaders()
19            }).then((response) => {
20              if (response.ok) {
21                return response.json()
22              }
23            }).then((data) => {
24              if (data) {
25                callback(data.items)
26              } else {
27                callback()
28              }
29            })
30          } else {
31            return callback()
32          }
33        },
34        onChange: (value) => this.updateHiddenField(value)
35      })
36    }
37  }
38
39  // This is necessary to record off school name
40  updateHiddenField(optionValue) {
41    if (this.hasHiddenFieldSelectorValue) {
42      const option = this.element.querySelector(`option[value='${optionValue}']`)
43      const educationQuestionGroup = option.closest('.education-question-group')
44      const hiddenFieldElement = educationQuestionGroup.querySelector(this.hiddenFieldSelectorValue)
45      hiddenFieldElement.value = option.text
46    }
47  }
48}