Any thought about creating a branch to support rails 7, stimulus 3.0? about stimulus-autocomplete

[salex]

Just as a follow up, I though I'd share my attempt at creating a pure stimulus controller - autopickr_controller.js.

It uses the same approach in that it has a markup that controls the application. I saw the pull request and I had also implemented the length stuff using a value.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input",'results','hidden','selected','button',"options"]
  static values = { url: String ,slen: Number}

  connect() {
    console.log("Hi autopickr")
    let slen  // slen is the number of charcters entered before we search/query
    if (this.hasSlenValue) {
      this.slen = this.slenValue
    }else{
      this.slen = 1
    }
    this.inputTarget.click() // activate the autofocus target
  }

  select(){
    const selected = event.target
    if (this.hasButtonTarget) {  // if there is a button target, display instead of following url
      this.buttonTarget.classList.remove('hidden')
      this.buttonTarget['href'] = selected.dataset.select
    }else{
      location.assign(selected.dataset.select)
    }
  }

  selected(){
    this.clear_results()
  }

  clear_results(){
    while (this.resultsTarget.firstChild) {
      this.resultsTarget.removeChild(this.resultsTarget.firstChild);
    }
  }

  async search(){
    var len = this.inputTarget.value.length
    if (len >= this.slen) { 
      let response = await fetch(this.urlValue+`?input=${this.inputTarget.value}`);
      let data = await response.text();
      let frag = document.createRange().createContextualFragment(data);
      this.clear_results()  // set result to no children
      this.resultsTarget.appendChild(frag) // rebuild the results
    }
  }
}

I'm certainly not a JS person, but I wondered why there was all this creating events to handle stuff like up and down arrows when the stimulus input action does all that. It has about everything except the ariel comment li. Even had that half ass working but never used it in autocomplete.

In the markup I added an optional button that basically gives you a confirm button which you could modify the url. (I use slim instead of erb!)

    div[
      data-autopickr-url-value="/demo/search" 
      data-controller="autopickr"
      data-autopickr-slen-value="1"
      class=blueBox
      // just calling a helper to set tailwind classes for a simple button
      ]
      div
        = text_field_tag(:input,nil,
          data:{autopickr_target:"input", action:"autopickr#search" },
          placeholder:"Search...",class:"w-48 px-1 my-2",autofocus:true)
        // span = link_to('Pick',nil,data:{autopickr_target:"button"}, class:"bg-blue-500 hover:bg-blue-700 text-white font-bold mx-2 py px-2 rounded inline-block hidden")
      div = hidden_field_tag('selected_id',nil,
        data:{autopickr_target:"hidden",action:"change->autopickr#selected"})
      ul.text-black.bg-gray-100.max-h-52.divide-y.divide-fuchsia-300.overflow-scroll[data-autopickr-target="results"] 

My problem was not getting autocomplete to work with Rails 7.x This works and I even put up a demo of a simple name search from a simulated model. Just names of family and pets. The demo is on a staging server on Rails 6.x- Name Search

I put the demo app on GitHub

[afcapel]

Stimulus 3 and rails 7 are already supported on main and in the latest release.

but I wondered why there was all this creating events to handle stuff like up and down arrows when the stimulus input action does all that

The goal of the controller is to provide a fully functional autocomplete with a minimal amount of js and changes to your HTML. You can certainly bind the actions with data attributes, but that'd make the template more complicated when probably most people just want the default behaviour.