Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I use easyautocomplete in rails 6?

Christopher asked in Rails

I tried adding it with yarn and through rails assets but nothings seems to work.

Reply

Bit low on info to really help you here. Any errors (from console) you can share? What is your current set up?

Reply

I added it with yarn add easy-automplete
my application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

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

window.Rails = Rails

import 'bootstrap'
import 'easy-autocomplete/dist/jquery.easy-autocomplete'
import "controllers"

require("trix")
require("@rails/actiontext")

my application.scss

//= require actiontext

@import 'bootstrap';
@import 'easy-autocomplete/dist/easy-autocomplete';
@import 'easy-autocomplete/dist/easy-autocomplete.themes';
Reply

My first guess is you haven't added jquery: yarn add jquery. Are you also sure these @imports are correct?
I'm sure the console from in your dev tools would give you another clue.

Reply

I just get this error

Uncaught TypeError: $(...).easyAutocomplete is not a function at <anonymous>:1:12
Reply

Looks like jQuery is indeed missing. 🙂

Reply

thank you I think I got it now

Reply

@Christopher Did you ever manage to solve this? I've tried adding it and keep getting the TypeError you mentioned.

This is my application.js file:

require("@rails/ujs").start()
require("jquery/dist/jquery")
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap/dist/js/bootstrap")
require("easy-autocomplete/dist/jquery.easy-autocomplete")

import LocalTime from "local-time"
LocalTime.start()

require("trix")
require("@rails/actiontext")

$(document).on('ready turbolinks:load', function () {
    bsCustomFileInput.init();
    $('[data-toggle="tooltip"]').tooltip();
})

and my aplication.scss :

@import "bootstrap/scss/bootstrap";
@import "easy-autocomplete/dist/easy-autocomplete";

Any idea what I'm missing?

Reply

@Umar did you add jquery to your environment.js file? Something like,

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

I haven't done it exactly like that, but have it as below:

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

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

Would that suffice? I should note that Bootstrap tooltips etc. all work just fine

Reply

Hello Umar, did you finally manage your issue ?

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 81,149+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.