Searchkick autocomplete with multiple attributes

Question

Novice here, having some difficulties implementing an autocomplete using Searchkick and Typeahead/bloodhound.

First of all I have a index/welcome home page where I have my input field for my search box. This then searches over multiple models for names of different Cells and different cellular markers (not important for this).

First of all in my routes file, im unsure wether to have my autocomplete 'attached' to my "welcome" route or my "Cells" route, I've tried both but doesn't seem to make a difference, currently it is set as this:

 resources :cells do
    collection do
      match 'autocomplete' => 'welcome#autocomplete', via: [:get], as: :autocomplete
    end
  end

 resources :welcome   #index / home page

my form input is:

<%= form_tag(@Search, :action => 'index', :method => "get", id: "search-form") do %>
<%= text_field_tag(:q, nil, placeholder: "Search...", class: "form-control rounded-left typeahead", autocomplete: "off") %>
<% end %>

My model is as follows:

searchkick text_start: [:name], callbacks: :async, suggest: [:name], word_start: [:name]

and my controller action:

  def autocomplete
        render json: Cell.search(params[:q], {
            fields: ["name^5"],
            autocomplete: true,
            limit: 5,
            load: false,
            misspellings: false
        }).map(&:name)
  end

finally the javascript:

<script src="typeahead.bundle.js"></script>
<script>
  var Cells = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/welcome/autocomplete?query=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#typeahead').typeahead(null, {
    source: Cells
  });
</script>

I guess I am just very confused on how to properly set this up, I'm finding the Searchkick docs to be difficult to extrapolate to my purposes as I'm pretty novice at all this :) If anyone is able to help or point me to a good guide (that isn't years old) that would be amazing, as I'm pretty sure I'm just going around in circles. Is this the best way to go about implementing an autocomplete or is there a better way to do this?

Thanks for reading, and thanks for any help :)

Answer 1

A quick update for any future readers:

Im certain in the routes, the code for your autocomplete must point towards your controller that has your autocomplete method, for me it is my welcome controller.

  resources :welcome do
    collection do
      match 'autocomplete' => 'welcome#autocomplete', via: [:get], as: :autocomplete
    end
  end

Im happy with my autocomplete method in my controller and am satisfied that I need the current javascript (currently in tags in my html

<script>
  var autocomplete = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/welcome/autocomplete?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#typeahead').typeahead(null, {
    source: autocomplete
  });
</script>

var autocomplete variable needs to be used below for the source: (I didn't realise this before)

still having difficulties as the autocomplete is still not working but I think I'm making progress