Tom select maxOptions with stimulus.js controller [Rails]

Question

I implemented tom-select with stimulus.js following a few tutorials. This being one of them: https://coolrequest.dev/2021/11/25/replace_select2.html

My autocomplete/select is working correctly, but I cannot seem to load more than 50 items that are in my database (I have 285); based on Tom Select documentation, the default number is 50, but you can override using maxOptions

I am a bit of a beginner as it relates to js and stimulus, and was wondering if someone might be able to help me figure out how to add maxOptions?

select_controller.js

import { Controller } from "@hotwired/stimulus"
import TomSelect      from "tom-select"

// Connects to data-controller="ts--select"
export default class extends Controller {
  static values = {
    url: String,
    options: Array
  }

  connect() {
    this.element.setAttribute( "autocomplete", "random" );

    var config = {
      plugins: ['clear_button'],
      render: {
        option: this.render_option,
        item: this.render_option,
      }
    }

    if(this.hasOptionsValue) {
      config.options = this.optionsValue
    }

    new TomSelect(this.element, config)
  }

  render_option(data, escape) {
    if(data.sub)
      return `
      <div>
        <div class="text">${escape(data.text)}</div>
        <div class="sub">${escape(data.sub)}</div>
      </div>`
    else
      return `<div>${escape(data.text)}</div>`
  }

}

If I inspect, it looks like all ~285 records are loaded as but the dropdown only displays 50.

Answer 1

I think this is what you're looking for

    var config = {
        maxOptions: 500,
        ...
    }

    ... 

    new TomSelect(this.element, config)