Error When Running easyAutocomplete in Rails 6 - easyAutocomplete is not a function

563 Views Asked by At

I followed this tutorial but I'm running into an issue: https://gorails.com/episodes/global-autocomplete-search

I am getting an error in the js console when refresh the page: search.js:31 Uncaught TypeError: $input.easyAutocomplete is not a function

However, when I put create an options variable directly in the console and run: $input = $("[data-behavior='autocomplete']") and then $input.easyAutocomplete(options) it works fine. Any idea why I am able to run easyAutocomplete directly in the console but not in the normal course of my app? Here is my application.js file:

// Rails functionality
window.Rails = require("@rails/ujs")
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

require("jquery")
require("easy-autocomplete")

require("custom/show")
require("custom/search")

// Tailwind CSS
import "stylesheets/application"

// Stimulus controllers
import "controllers"

// Jumpstart Pro & other Functionality
import "src/actiontext"
import "src/confirm"
import "src/direct_uploads"
import "src/forms"
import "src/timezone"
import "src/tooltips"

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

// ADD YOUR JAVACSRIPT HERE

// Start Rails UJS
Rails.start()

Any ideas on this? Thanks!

Edit 1 - added search.js:

search.js

$(document).on('turbolinks:load', function() {
    if ($('#search-input').length) {
        console.log('in search.js')
        $input = $("[data-behavior='autocomplete']")

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

        $input.easyAutocomplete(options)
    }
})
0

There are 0 best solutions below