简易自动完成无法识别

Posted 2023-05-09

【中文标题】简易自动完成无法识别

【英文标题】：Easy Auto-complet is not recognized

【发布时间】：2021-07-13 22:24:38

【问题描述】：

当我的用户在我的网络应用程序上键入播放器的伪代码时，我会使用简易自动完成来添加建议。

但它不起作用。

这是我收到的消息：

people.js:7 Uncaught TypeError: $input.easyAutocomplete is not a function
    at htmlDocument.<anonymous> (people.js:7)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

这是我的代码：

在 app/javascript/packs/people.js 中

document.addEventListener("turbolinks:load", function() 
  $input = $("[data-behavior='autocomplete']")
  var options = 
    getValue: "pseudo"
  
  $input.easyAutocomplete(options)
);

console.log("custom js file loaded")

这是我的布局：

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
<%= javascript_pack_tag 'people', 'data-turbolinks-track': 'reload' %>

当然在我的布局中，这部分之前和之后都有 OG facebook 和 twitter 应答器的脚本

这是我的 environment.js：

const  environment  = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin(
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  )
)

module.exports = environment

我也试过了，但效果不佳：

const  environment  = require('@rails/webpacker')

const webpack = require('webpack');
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin(
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  )
);
module.exports = environment

如果您需要更多信息，我准备回答。

提前致谢

【问题讨论】：

您正在从 CDN 加载 jquery，但您似乎提供的是本地路径 $: 'jquery/src/jquery'

是的，这意味着，我应该更改我的 environment.js 文件？或者我可以使用另一种方式来加载我的 Jquery ？另外，当我在控制台中输入$().jquery 时，它会打印出Jquery 的版本，不知道它是否有助于您看得更清楚？

老实说，我对 webpack 一无所知，但你配置它的方式似乎是错误的。

好的，我尝试了其他方法，但还是不行（你可以看到编辑）

【参考方案1】：

您以错误的方式包含 javascript 文件。 正如辅助方法文档所说：

  # DO:
  #
  #   <%= javascript_pack_tag 'calendar', 'map' %>
  #
  # DON'T:
  #
  #   <%= javascript_pack_tag 'calendar' %>
  #   <%= javascript_pack_tag 'map' %>

https://github.com/rails/webpacker/blob/f1b06c7fd5bc4b7fc7128742d1078466b94af71f/lib/webpacker/helper.rb#L89-L97

在你的情况下：

<%= javascript_pack_tag 'application', 'people', 'data-turbolinks-track': 'reload', defer: true %>

【讨论】：

您好，我尝试过这种方式，但浏览器的控制台中弹出相同的错误

您在哪里需要 easyAutocomplete？

您好，我终于用 Alogilia 和刺激解决了这个问题。谢谢