RAILS 6 - how to use EasyAutocomplete

Question

I try the last hours to integrate EasyAutocomplete into RAILS 6. But not so easy.

What I did :

Install Javascript Package with yarn:

# yarn add easy-autocomplete

Add this in the file app/javascript/packs/application.js

import “easy-autocomplete”

Add this in the file app/assets/stylesheets/application.css

*= require easy-autocomplete
*= require easy-autocomplete.themes

Then start the Rails Server and refresh the Web Page. Then try to use it. Go into the developer console and type :

var options = {
data: ["otto", "hans", "paula"] 
};

$("#task_name_search_field").easyAutocomplete(options);

task_name_search_field was previously defined as id :

<input type="search" class="form-control" id="task_name_search_field">

I got this message: TypeError: $(...).EasyAutocomplete is not a function

Any idea ?

Hello, did you finally find out a solution ? I'm facing the same issue — gclement, Apr 15 '21 at 13:47
@sven did you find one of the below answers solved the problem? — Joe Bloggos, Aug 18 '21 at 21:35

score 2 · Answer 1 · answered May 02 '20 at 17:56

I had the same problem. Turbolinks does not give access to the script, the code needs to be run after it is loaded, something like this:

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

  $("#task_name_search_field").easyAutocomplete(options);
});

In order for the autocomplete to work, you need to add a script file to the application.js like this:

require("packs/youfile")

If it helps you, here is an example of my code:

document.addEventListener("turbolinks:load", function() {
 $input = $("[data-behavior='autocomplete']")

 var options = {
  getValue: "full_name",
  url: function(phrase) {
  return "/search.json?q=" + phrase;
 },
categories: [
  {
    listLocation: "cameras",
    header: "<strong>Cameras</strong>",
  }
],
list: {
  onChooseEvent: function() {
    var url = $input.getSelectedItemData().url
    $input.val("")
    Turbolinks.visit(url)
  }
 }
}
$input.easyAutocomplete(options)});

score 0 · Answer 2 · answered Apr 17 '20 at 14:43

0

I suppose you wouldn't have included jquery in your application.js. You need to do explicitly as it doesn't get included automatically with rails 6 app.

answered Apr 17 '20 at 14:43

Amit Patel

15,609
18
68
106

What did you mean with : You need to do explicitly as it doesn't get included automatically with rails 6 app. – Sven Kirsten Apr 17 '20 at 14:49
Just like you added `easy-autocomplete` you need to add `jQuery` – Amit Patel Apr 17 '20 at 15:04
jQuery is already in place. I use also Bootstrap and Bootstrap needs also jQuery. And Bootstrap works fine. So I think the issue is not related on jQuery. – Sven Kirsten Apr 17 '20 at 15:44

score 0 · Answer 3 · answered Jun 08 '20 at 04:40

I ran into a similar issue. I'm a n00b at Webpacker, but by default it doesn't seem to compile in the same order in which plugins are included.

To get around the issue I did this workaround which just wraps the plugin code in an anonymous jQuery function, like so:

(function($) {

//Eac plugin code

})(jQuery);

https://github.com/pawelczak/EasyAutocomplete/issues/200#issuecomment-212277620

Maybe there is a way in the configs to force compilation in the correct order. This looks promising https://stackoverflow.com/a/43005332/148390

score 0 · Answer 4 · answered Dec 15 '20 at 18:15

0

Add script-loader to package.json then add

import 'script-loader!jquery/dist/jquery.min'

in app/javascripts/application.js

Check in your browser that $().jquery yields a proper result.

answered Dec 15 '20 at 18:15

ruurd

131
1
4

RAILS 6 - how to use EasyAutocomplete

4 Answers4

Linked