All threads / How do I use easyautocomplete in rails 6?

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.

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

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';

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.

I just get this error

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

Looks like jQuery is indeed missing. 🙂

thank you I think I got it now

@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?

@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'
    })
)

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

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.