Paul Stutler

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

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

In case anyone looks at the post above, I have broken down the sequence into steps and have "proven" that the javascript runs correctly in the browser and that the controller is producing the JSON array. But nothing is showing up on the page. Any ideas on what could be the problem? How I could see the JSON object returned and in the browser and/or how it fails with the autocomplete gem?

Thank you for the tutorial.

I get all of this to work until the final part of hooking it to the form field (I am using Bootstrap for forms).

I use the name "databehavior" rather than "data-behavior".
When I enter the field on the form I get autocomplete suggestions but they are from other inputs unrleated to the app. It seems that the search.js code is not being executed.

Any ideas?

Here is the form input code:
<%= form_with url: search_path, local: true, method: :get, html: {class: "form-inline my-2 my-lg-0" } do |form| %>
<%= form.text_field :q, placeholder: "College", data: { behavior: "autocomplete" },
databehavior: "autocomplete", class: "form-control mr-sm-2"%>
<% end %>

Here is the search.js code:
document.addEventListener("turbolinks:load", function() {
$input =$("[databehavior='autocomplete']")

var options = {
getValue: "name",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listlocation: "users",
header: "Users",
}
]
}

$input.easyAutocomplete(options)
});