Episodes
Tim Dowling PRO said almost 2 years ago on Autocomplete with StimulusJS :
Amazing!! thank you so much!!

tnobler said almost 2 years ago on Autocomplete with StimulusJS :
This is great!  I am trying to implement this for a product field, so that you search products.  I have 
product.name
as the content for the content_tag in the view:
<%= content_tag :li, product.name, role: :option, data: { 'autocomplete-value': product.id } %>
How can I add other product attributes to show up in the search display?  In other words, when I type "Some Product" the results list displays "Some Product Name | Price | Description | etc"?



David Kimura PRO said almost 2 years ago on Autocomplete with StimulusJS :
  tnobler You can just modify the content tag into a block.

<%= content_tag :li, role: :option, data: { 'autocomplete-value': product.id } do %>
  <%= product.name %> |
  <%= product.price %> |
  ...
<% end %>

tnobler said almost 2 years ago on Autocomplete with StimulusJS :
One more...how can you make it to where the search input is case-insensitive?  When I search "li", "Light bulb" is not a result, but it is for search "Li".  Thanks for the quick response!

David Kimura PRO said almost 2 years ago on Autocomplete with StimulusJS :
  tnobler Which database backend are you using? MySQL should automatically do a case-insensitive search.

If using postgresql, you can use ILIKE instead of LIKE

tnobler said almost 2 years ago on Autocomplete with StimulusJS :
You the man!

Helmut said over 1 year ago on Autocomplete with StimulusJS :
Hi! Any advice how to troubleshoot the Stimulus controller not activating at all? I created the same sample app you used, and got things working fine, and as I type into the Author field, I can see Rails responding to the keypresses in the terminal log, and I can see the search results appear in the browser.

But then I tried to implement autocomplete in a bigger app I've been working on for a while, and it does NOT show any auto-complete results, and there's no activity in the Terminal logs when typing in the field. Makes me think that the Stimulus controller is not firing, but I'm not sure how to troubleshoot. I've double-checked all my code for errors, and found none.

One thing I wonder about is when I installed stimulus-autocomplete in this bigger project, yarn gave me a few errors/warnings (see below). Could it be that the stimulus controllers didn't install properly (I don't have much experience installing dependencies)? Any other suggestions for how to figure out why the Javascript is not responding to key inputs?

THANKS MUCH!



yarn add v1.22.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning [email protected]: The engine "git" appears to be invalid.
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "[email protected]^4.0.0 || ^5.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "[email protected]^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
info All dependencies
✨  Done in 3.59s.


David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
  Helmut can you post relevant code? Also, check your browser's console for any errors as that could prevent controllers from firing. In the initialize() function, you could put a console.log within there to make sure that it is getting triggered. If it isn't, there could be a naming issue or something else. Also, when you register the autocomplete library (likely in the index.js in the controllers folder), make sure you're using that name as the data-controller.


Helmut said over 1 year ago on Autocomplete with StimulusJS :
Hi David, thanks for the quick reply! I will triple-check things tomorrow and post code, but can say that I see no errors in the Terminal log, and I put a "PUTS "THE INDEX IS BEING CALLED!!!" message into my Client controller Index action, and it never appears (in my bigger project, I have Invoices that belong to Clients, instead of Books that belong to Authors).

But one question: you say "In the initialize() function, you could put a console.log within there to make sure that it is getting triggered". But where would I find the actual controllers that Stimulus-Autocomplete installs? There are no autocomplete controllers in my Javascript>Controllers folder (where all my other stimulus controllers are), and I figured that the Autocomplete controllers were not accessible because I installed them via Yarn. I know Stimulus is generally working in my app because lots of other parts of the app use it (including your Nested_Forms controller, which has been great!). 

Thanks!

David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
  Helmut The stimulus controller doesn't actually get "installed".  In the javascript/controllers/index.js you should import the library and then register it with the Stimulus library.

import { Autocomplete } from 'stimulus-autocomplete'

application.register('autocomplete', Autocomplete) 

Helmut said over 1 year ago on Autocomplete with StimulusJS :
Hi David, okay, I didn't realize I could just put some Javascript in Index.js. So I put a console.log statement in there, but it doesn't show up when I run my problem app. However, on my smaller sample app that mimics your demo, I can put that same console.log statement in the Index.js file, and it DOES show up. 

So I think the Autocomplete installation just isn't working on my bigger app, since the code between my sample app and bigger app is pretty much identical except for a couple of different class names (Invoice for Book, Client for Author).  Do you know if there's a way to uninstall Autocomplete, and maybe start again? Or take other steps to troubleshoot why Rails (6.0.3) isn't seeing the library? 

Thank you!

Helmut said over 1 year ago on Autocomplete with StimulusJS :
David, I got it working! 

I removed the Yarn install of autocomplete, and then installed again. Nothing. Finally, I came across the "application.js" file in a "javascript/packs" folder and noticed that it had some of the same lines as the index.js file. I had used this file to install Tailwind and Flatpickr a couple months ago, but that was about it, and I forgot about it. But it occurred to me that index.js is being ignored because application.js  is doing all that stuff already. So I just moved the "import Autocomplete" and "application.register" lines into my application.js file, and everything worked....

Whew! 

Thanks for the assistance, though, it's appreciated....





wastetime909 said over 1 year ago on Autocomplete with StimulusJS :
David:

Got this problem when I checked chrome's console:
Any idea what caused this issue?

Thanks.

David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
  wastetime909 it appears to be an issue with stimulus 2.0.0 since the library isn't having it as a required dependency and causing a double loading of the Stimulus library. See this page as a workaround. https://github.com/afcapel/stimulus-autocomplete/pull/26

TEST
Make stimulus a peer dependency, support stimulus 2 by Intrepidd · Pull Request #26 · afcapel/stimulus-autocomplete

I tried this package with stimulus 2 and had very cryptic error messages. After much debugging and crucial help from @adrienpoly we realised that stimulus is a dependency rather than a peer depende...

https://github.com/afcapel/stimulus-autocomplete/pull/26


David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
Basically, You would need to add this code as if it were one of your own stimulus controllers and give it a proper file name so that it works with your existing code which invokes the controller. You would also need to add lodash.debounce via yarn.

https://github.com/afcapel/stimulus-autocomplete/blob/master/src/autocomplete.mjs

David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
I've downloaded the source for this episode and tested these changes out with Stimulus 2.0.0 and confirmed that this will resolve the issue.

jmarsh24 said over 1 year ago on Autocomplete with StimulusJS :
Would it be possible to post some code on how you would use this autocomplete in a search bar with a button? I have been working on trying this to work, but the autocomplete always drags along the button. If I only have the text field it's ok.

David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
  jmarsh24  would you be able to create a sample application to work off of, I can probably make a PR or help with some guidance.

arjunrajkumars said over 1 year ago on Autocomplete with StimulusJS :
THanks David! Any suggestions on best ways to do this without webpacker?

David Kimura PRO said over 1 year ago on Autocomplete with StimulusJS :
  arjunrajkumars  do you mean with Stimulus via the asset pipeline or without anything like that?

palmo25 PRO said about 1 year ago on Autocomplete with StimulusJS :
Hi Dave,
I've followed video tutorial but I don't know why it's not working. It doesn't pick autocomplete.
From the server I get this message
Processing by BooksController#create as HTML
  Parameters: {"authenticity_token"=>"[FILTERED]", "book"=>{"title"=>"I Malavoglia", "publish_year"=>"1881", "author_id"=>""}, "author"=>"Giovanni Verga", "commit"=>"Create Book"}
and in the view I get the error message "Author must exist".
I've created the application and pasted the code of your post. Can't understand where is the mistake. 

David Kimura PRO said about 1 year ago on Autocomplete with StimulusJS :
  palmo25  can you paste your form partial's relevant areas?

jonas PRO said about 1 year ago on Autocomplete with StimulusJS :
I have a legacy project in Rails 6.1 where I use assets pipeline and yarn. Tried webpacker but got in to trouble with a lot of old jquery which I am trying to replace with new stimulus code. Hence the need for stimulus-autocomplete.

I can't get the stimulus-autocomplete to load, I get:
Failed to autoload controller: autocomplete - Error: Unable to resolve specifier 'autocomplete_controller' from http://localhost:3000/dev-assets/stimulus/loaders/autoloader.debug.js

I have
Rails.application.config.assets.paths << Rails.root.join('node_modules')
in assets.rb

What needs to be done in order to import controllers from node_modules into stimulus using assets_pipeline?


David Kimura PRO said about 1 year ago on Autocomplete with StimulusJS :
  jonas That's a tricky one. From what I've seen, adding the node modules to the assets path will allow searching the yarn packages in the asset pipeline. How did you set up stimulus in this application? Also, in your config/application.rb, did you set the load defaults to 6.1?

jonas PRO said about 1 year ago on Autocomplete with StimulusJS :
Thanks,

Stimulus is added via gem 'stimulus-rails', works fine. The index.js looks just like in the episode.
Had forgotten to change the defaults to 6.1, it was 6.0, but it made no difference.

Is sprockets supposed to compile the node_modules to dev-assets or how is it supposed to work?

njunusk PRO said 14 days ago on Autocomplete with StimulusJS :
Thanks Dave.
Had a thought on this, imagine a scenario where our author is not persisted in our database but we have to create a book with an associated author, is there a way we can check if author is persisted in our database and maybe provide a `new author` link if the record does not exist.

Thank you in advance. 

Login to Comment