Amazing!! thank you so much!!

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"?

 ☒ 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 %>

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!

 ☒ Which database backend are you using? MySQL should automatically do a case-insensitive search.

If using postgresql, you can use ILIKE instead of LIKE

You the man!

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 np@6.5.0: The engine "git" appears to be invalid.

[3/4] 🔗  Linking dependencies...

warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".

[4/4] 🔨  Building fresh packages...

success Saved 1 new dependency.

info Direct dependencies

└─ stimulus-autocomplete@1.4.0

info All dependencies

└─ stimulus-autocomplete@1.4.0

✨  Done in 3.59s.

 ☒ 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.

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!

 ☒ 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) 

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!

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....

David:

Got this problem when I checked chrome's console:

Any idea what caused this issue?

Thanks.

 ☒ 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

☒

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

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.

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.

 ☒ would you be able to create a sample application to work off of, I can probably make a PR or help with some guidance.

THanks David! Any suggestions on best ways to do this without webpacker?

 ☒ do you mean with Stimulus via the asset pipeline or without anything like that?

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. 

 ☒ can you paste your form partial's relevant areas?

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?

 ☒ 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?

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?

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. 

hi dave,
thank you for the tutorial,
want a autocomplete input a value to a form without any relation
not able to figure it out, if you please suggest

below is my form partial

<%= simple_form_for [patient, patient_test], html: { class: "form patient-test" } do |f| %>
  <%= form_error_notification(patient_test) %>
  <%= f.input :testname, html5: true, input_html: { autofocus: true } %>
  <%= link_to "Cancel", patient_path(patient), class: "btn btn--light" %>
  <%= f.submit class: "btn btn--secondary" %>
<% end %>

want to get test list for testname form Test table which does not have any relation with patient or patient_test (only patient has many patient_test, patient_test belongs to patient )
thank you

You should still be able to adopt a lot of this episode's code to accomplish this.

hi dave,
sorry to bother you, but looks like I'm struggling to with autocomplete
I'm not able to figure out how to use autocomplete in place of select
i tried to do follow the complete tutorial, but I'm not able to figure out what i'm doing wrong
if you please help it would be just great, below is link to my repo,
https://github.com/mydbdiagram/sdrift
in the same i tries other autocomplete in books.index which works
please have a look
thank you so much

  01fe20bec001 It seems to work fine for me when I pulled down your code. 

The one difference is that I noticed that you did not have stimulus-autocomplete added to your package.json, so I added it with

yarn add stimulus-autocomplete

hi dave,
autocomplete in books index works fine, refereed this tutorial Search Autocomplete Stimulus https://dev.to/thomasvanholder/search-autocomplete-stimulus-560p,
not able to get books.new working, also ran yarn add stimulus-autocomplete, but still the same results
trying to attach screen shot but not able to
thank you