How do I use easyautocomplete in rails 6?

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

Hello Umar, did you finally manage your issue ?