1

It has been several days now that i've been trying to make work the easy-autocomplete package with my Rails 6 application.

I followed this tutorial.

I tried some solutions, like this one but it still doesn't work.

In all my attempts the error displayed on the web console is: Uncaught TypeError: $(...).easyAutocomplete is not a function.

Here is my application.js:

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("bootstrap");
// Stylesheets
require("../stylesheets/main.scss");

require("easy-autocomplete");

I don't need to require('jquery') since it's included with the Bootstrap package. I use JQuery functions all over my app and haven't got any errors.

My application.scss:

 @import 'easy-autocomplete/dist/easy-autocomplete';
 @import "variables";

* {
  font-family: $syne-font
}

And my custom js code:

$(document).on("turbolinks:load", function () {
  var options = {
    data: ["otto", "hans", "paula"],
  };

  $("#city_search").easyAutocomplete(options);
});
b0rdjack
  • 35
  • 5

2 Answers2

0

I would advise that you install jQuery using the yarn and also do he configuration in the config/webpack/environment.js. once done require the jQuery as expected from the tutorial.

Try it and it should work.

Kunle Lameed
  • 13
  • 7
0

So the easy-autocomplete lib is not maintained anymore.

I did find a workaround by using the webpack-jquery-ui lib, here's an example of implementation:

app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("bootstrap");

// Stylesheets
require("../stylesheets/main.scss");

global.$ = require("jquery");

require("webpack-jquery-ui");
require("webpack-jquery-ui/css");

$(function () {
  $(".my-input-automcompleted").autocomplete({
    source: "/autocomplete",
  });
});

But IMHO it's better to use Stimulus and the stimulus-autocomplete lib now !

b0rdjack
  • 35
  • 5