I would to use easy-autocomplete to add suggestions while my users are typing the pseudo of a player on my web-app.
But it doesn't work.
Here is the message I've got :
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
I would to use easy-autocomplete to add suggestions while my users are typing the pseudo of a player on my web-app.
But it doesn't work.
Here is the message I've got :
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
Here is my code :
In 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")
Here is my layout :
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' %>
Of course in my layout, before and after this part there are script for OG facebook and twitter balises
Here is my 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
I looked everywhere on the web, but didn't find any answer