Tom使用stimulus.js控制器[Rrails]选择maxOptions

Question

我在一些教程之后用stimulus.js实现了tom-select。这是其中之一：https://coolrequest.dev/2021/11/25/replace_select2.html

我的自动完成/选择工作正常，但我似乎无法加载数据库中超过50个项目(我有285个(；根据Tom Select文档，默认数字为50，但您可以使用maxOptions进行覆盖

我有点初学者，因为它与js和刺激有关，我想知道是否有人能帮我想出如何添加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>`
}
}

如果我检查，看起来所有~285条记录都加载为，但下拉列表只显示50条。

Answer 1

我想这就是您想要的

var config = {
maxOptions: 500,
...
}
... 
new TomSelect(this.element, config)