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