Creating a custom stimulus controller to hook into searchable

[Sandilly]

Hi,

I have referred to this page to create a custom stimulus controller for the cities select box. https://docs.avohq.io/3.0/stimulus-integration.html#custom-stimulus-controllers

Now, if I wanted to make the cities select box searchable: true, the searchable overlay will not have those results since the stimulus controller is just appending the results to the select's option.

Any suggestions? Thank you again for all your help!

[Paul-Bob]

Hi @Sandilly.

I’ve tested this, and you can achieve it like this:

# app/avo/resources/course_link.rb
class Avo::Resources::CourseLink < Avo::BaseResource
  self.stimulus_controllers = "test"

  def fields
    field :course, as: :belongs_to, searchable: true
  end
end

# test_controller.js
import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ['courseBelongsToInput']

  // I'm doing this on connect for testing, please execute this logic on the select change callback
  connect() {
    this.courseBelongsToInputTarget.parentNode.parentNode.setAttribute(
      'data-search-extra-params-value',
      JSON.stringify({
        test1: 1, // change this with the value from select, access in resource search by params["test1"]
        test2: 2, // change this with other value that you want to send to the search, access in resource search by params["test2"]
      }),
    )
  }
}

# app/avo/resources/course.rb
class Avo::Resources::Course < Avo::BaseResource
  self.search = {
    query: -> {
      puts ["params['test1']->", params['test1']].inspect
      puts ["params['test2']->", params['test2']].inspect
      query.ransack(id_eq: params[:q], name_cont: params[:q], m: "or").result(distinct: false)
    }
  }
end

Explanation:

• In this example, CourseLink belongs to a Course. When creating or editing a CourseLink, the extra params are passed to the field :course, as: :belongs_to, searchable: true, making them available in the search query.
• I'm modifying the data-search-extra-params-value attribute to store extra search parameters.
• These parameters can then be accessed inside the search query of Avo::Resources::Course.

⚠️ This implementation relies on some internals. While we don’t have immediate plans to change these internals, I recommend reviewing this periodically to ensure it continues to work as expected.

Let me know if this works for you!