Rails 7中手动集成无法Pin的JS自动补全库的报错解决方案

步骤1：放置JS库文件 #

• 下载JavaScript-autoComplete的核心JS文件（如autoComplete.min.js）
• 将文件放入项目的app/assets/javascripts/目录（若项目使用asset pipeline）

步骤2：确保库在实例化前加载 #

需要在实例化代码执行前完成库的加载，可选择两种方式：

• 全局引入：在app/views/layouts/application.html.erb的<body>末尾添加：

  <%= javascript_include_tag 'autoComplete.min' %>
  

• 局部引入：仅在当前使用自动补全的视图中，在实例化代码前添加上述标签

步骤3：正确实例化autoComplete #

给表单输入框添加唯一ID，确保DOM加载完成后再执行实例化代码：

<%= form_with model: @individual, data: {turbo: false} do |form| %>
  [...] 
  <%= form.text_field :tz, id: 'tz-autocomplete' %>
  [...]
<% end %>

<%= javascript_tag do %>
  document.addEventListener('DOMContentLoaded', function() {
    new autoComplete({
      selector: '#tz-autocomplete',
      source: function(term, response) {
        // 替换为你的实际数据源逻辑，比如时区列表
        const timezones = ['Asia/Shanghai', 'Europe/London', 'America/New_York'];
        const matches = timezones.filter(tz => tz.toLowerCase().includes(term.toLowerCase()));
        response(matches);
      }
      // 可根据库文档添加其他配置项
    });
  });
<% end %>

可选：通过Importmap手动映射 #

若想用Importmap管理，可做如下配置：

1. 在config/importmap.rb添加映射：

   pin "autoComplete", to: "assets/javascripts/autoComplete.min.js"
   

2. 在app/javascript/application.js导入并暴露到全局：

   import autoComplete from "autoComplete";
   window.autoComplete = autoComplete;
   

之后即可按步骤3的方式正常实例化。

内容的提问来源于stack exchange，提问作者Jerome