pawelczak / EasyAutocomplete

JQuery autocomplete plugin
http://easyautocomplete.com
MIT License
729 stars 244 forks source link

easyAutocomplete is not a function #449

Open gambas-maker opened 3 years ago

gambas-maker commented 3 years ago

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