Javascript not executing

I viewed the easyAutocomplete video, which was great. I have the DB query and JSON assembly working. And the Javascript loads into the browser (Chrome DevTools let's me inspect it). But it never triggers. If I manually add it into the console, without the EventListener, it does trigger, as I see the server side create the JSON in response.

Two issues. Firstly, the Javascript in the file does not trigger on its own. One possible issue: I have it in a file called search.js. The page where the input is captured is for a model called other. If load the Javascript into other.js, it does not load into the browser. Just the default Javascript content.

Secondly, the JSON never gets rendered. Right now I trigger it manually through the console and the server gets the request and assembles the JSON. But no autocomplete dropdown appears. As a side note, during the video by Chris, I did the test with a test data array successfully. So easyAutocomplete is "on."

Any ideas on what I'm doing wrong? Why doesn't the code in other.js get sent to the browser (do I need a json builder in that model to trigger the javascript load?)? Why doesn't the javascript trigger? I have tried it without the listener and also with it.

Many thanks for any help.

Paul

The javascript in the tutorial did not work.
Ended up not doing two categories. Just one so did not do
a json.movies. Did just the json.array.

The categories: code stayed the same and it did use the first one to display the list.

This worked.

json.array!(@interests) do |i|
json.iname i.interest
end

document.addEventListener("turbolinks:load", function() {
$input = $("[databehavior='autocomplete']")

var options = {

url: function(phrase){
  return "/search.json?q=" + phrase;
},

getValue: "iname",

categories: [
  {
    listlocation: "interests",
    header: "-- Schools --",
  },
  {
    listlocation: "interests2",
    header: "INT-2",
  }
]

}

$input.easyAutocomplete(options)
});

Thank you