我有一个rails 7应用程序，我正试图用tom-select或slim-select创建一个搜索栏.无论我使用哪个库，我的问题都会复制，因此它一定是我rails方面的问题.
app/views/cities/index.html.erb
<%= form_for :city, url: cities_path, method: 'GET' do |f| %>
<div class="mt-4 border bg-light px-4 py-3 rounded-3">
<%= f.select :search_city, [], {},
placeholder: 'Type to search',
data: {
controller: 'ts--search',
ts__search_url_value: autocomplete_cities_path
} %>
<%= f.submit 'Search', class: 'btn mx-auto' %>
</div>
<% end %>
这是我的js控制器(在本例中，我使用的是tom select)
import { Controller } from "@hotwired/stimulus";
import { get } from "@rails/request.js";
import TomSelect from "tom-select";
export default class extends Controller {
static values = { url: String };
connect() {
var config = {
plugins: ["input_autogrow", "remove_button", "no_active_items"],
render: {
option: this.render_option,
item: this.render_option,
},
valueField: "value",
loadThrottle: 400,
load: (q, callback) => this.search(q, callback),
closeAfterSelect: true,
persist: false,
create: false,
delimiter: ", ",
maxItems: 10,
};
new TomSelect(this.element, config);
}
async search(q, callback) {
const response = await get(this.urlValue, {
query: { query: q },
responseKind: "json",
});
if (response.ok) {
callback(await response.json);
} else {
console.log("Error in search_ctrl: ");
callback();
}
}
render_option(data, escape) {
return `<div>${escape(data.text)}</div>`;
}
}
app/controllers/cities_controller.rb
class CitiesController < ApplicationController
def index
end
def autocomplete
list = City.order(:name)
.where("name ilike :q", q: "%#{params[:q]}%")
render json: list.map { |u| { text: u.name, value: u.id, sub: u.state } }
end
end
Problem Repro:
- 打开城市索引并单击搜索栏.
- 下拉菜单打开，我可以键入并 Select 一个建议.一旦选中，建议将显示在搜索栏中，单击"x"将从搜索栏中删除.
- 我添加任意数量的搜索令牌，1-N.
- 单击"搜索"->；查看结果页面.
- 单击浏览器中的后退按钮(或在手机上向后滑动)
Expected behavior:
Actual behavior:
我回来后怎么让JS工作？