Ruby on Rails #94 Rails 7 Select Box with Search using Slim-Select

I was planning to create a short episode on enabling slim-select, but it ended up having a big boilerplate for adding "select" and "multiselect". If you don't need the boilerplate, feel free to skip to 9:25.
The boilerplat app uses Importmaps for JS and Tailwind for CSS.
I like slim-select because it uses vanilla javascript and does not rely on jQuery. If you don't like slim-select, the second best alternative is tom-select.
Episode source code: github.com/corsego/94-slim-se...
Text version: blog.corsego.com/stimulus-sli...

[@BrianVoelker]

You named the exactly reason why I created slim-select so long ago. I wanted to get off of jquery and no one else had a non jquery dropdown select library.

[@SupeRails]

wow Brian, so nice to see you here! 🥰🥰🥰
Thanks so much for your great work!

[@MuhammadAbdullah-ft4kc]

You are a great teacher. Keep it up!

[@SupeRails]

Thanks Muhammad. Your words mean a lot to me and motivate me to keep going!

[@user-ib5bc2dd8q]

Thanks a lot! Saved me after testing many things :))) keep going!

[@volotot4701]

Awesome and very helpfull, thanks a lot!

[@VirtualHealthCare]

Great tutorial

[@joseluismoreyrajr.7598]

What keyboard do you use in this video? I love the sound. Also great video!

[@SupeRails]

oh its a regular external white apple keyboard

[@ViktorSchmidt]

Again, useful and great!

[@SupeRails]

Thanks Viktor. I'm glad you found it useful!

[@ddd2283]

Thank You for tutorial!
You need 2 steps to success:
1) Add this - Rails.application.config.assets.paths

[@rahulk6130]

Why do you wish to add 'node_modules' when this tutorial is using importmap and __not__ npm.
Or do you mean that import maps is not good, and esbuild is better ?

[@tetyanagon3342]

TY!!! Nice job.

[@volotot4701]

Could I ask you about using a few different SlimSelecControllers(using different settings for different select-inputs)?

[@JorgeRodz04]

Thank you!

[@duybao2136]

Thank for a great video. Can i have 1 one question . Does this also work with form.text_field for search autocomplete

[@SupeRails]

slim select has single select (that is sort of search autocomplete).
But for actual "search autocomplete" I would suggest using an approach like this: superails.com/posts/ruby-on-rails-60-hotwire-turbo-streams-autocomplete-search

[@azizdevfull]

useful video bro : )

[@ledockol]

Чудово, дякую!

[@SupeRails]

Slava!

[@remotronic]

👍

[@hassanbawazir216]

I do same at all , but i have one problem .. When i go to back page ( th previos page have slim select) , it duble inputs , why coming like this?

[@neerajkeriya]

What are your thoughts about select2 vs slim-select??

[@SupeRails]

select2 relies on jquery, so I would avoid it. As I said in the video, I try to avoid having jquery in a modern rails app

[@FoodTrips_]

@@SupeRails Can you please do a vide o on search implementation using searchkick (elasticsearch)

[@FoodTrips_]

Can you please do a vide o on search implementation using searchkick (elasticsearch)

[@SupeRails]

hello, whoever it is behind Food Tips :) I haven't had the chance to work with searchkick / elastic on commercial projects, so can't do a tutorial on this one... yet! As soon as I have the knowledge, I will

[@jeanchavez6048]

Is it possible to add a tag that is not in the list and create it from the select?

[@SupeRails]

Hey Jean, great question! Yes you can do it. Here is my solution in this blogpost: blog.corsego.com/select-or-create-with-tom-select

[@jeanchavez6048]

@@SupeRails thanks, i'm your fan

[@hsxn_sports]

Do you know if it is possible to add additional information in the form select search? For example first name, last name and email. I tried adding def full_name "#{first_name} + ' ' #{last_name}" end in the User model but I am getting unknow column full_name Thank you.

[@SupeRails]

Try “map”. Something like
User.all.map { |u| [u.id, u.full_name] }

[@hsxn_sports]

@@SupeRails Thank you for the quick response. I tried and I got a syntax error. syntax error, unexpected '}', expecting '.' or &. or :: or '['

[@hsxn_sports]

Sorry I found my silly error. . Works great now. Thank you so much! Love your videos

[@SupeRails]

@@hsxn_sports maybe User.all.map { |u| [u.id, u.full_name] }

[@andyhemphill]

is it possible to change the CSS to pick up tailwind style?

[@SupeRails]

I think this is how you can do it: slimselectjs.com/settings#cssClass

[@andyhemphill]

@@SupeRails I spent hours but couldn’t get it to change , thanks anyway 👍

[@andyhemphill]

@@SupeRails I spent hours but couldn’t get it to change , thanks anyway 👍

[@danielecasal2961]

does this work with rails 7 and simple_form gem?

[@SupeRails]

Hi Daniele!
For this particular field you would not need to use simple_form's form.input.
Just use the inbuild form.select.

[@danielecasal2961]

@@SupeRails Thank you for the tip Yaroslav. I've done that. I've followed the video step by step. Something is failing with my slim controller though: Failed to register controller: slim (controllers/slim_controller) SyntaxError: The requested module 'slim-select' does not provide an export named 'default'

[@3pedroneto]

@@danielecasal2961 I'm getting this problem too

[@denvernovencido1925]

Im getting this error too when using the version 2.4.0

[@RyanJeffB]

did you find any solution, I have the same issue with the failed controller

[@h2w..]

One yer of video but slim select is broken and does not work anymore

[@rahulk6130]

Working fine with me. Please check my post above.

[@h2w..]

Does not work with rails 7 and botstrap 5

[@rahulk6130]

What exactly is broken? What error are you getting ? Have you tried with tailwind?

[@user-yx5mz3gl5c]

i want to use selectAll in my code can you help
import { Controller } from "@hotwired/stimulus";
import SlimSelect from "slim-select";
// import 'slim-select/dist/slimselect.css'
// Connects to data-controller="slim"
export default class extends Controller {
connect() {
new SlimSelect({
select: this.element,
selectAll: true,
settings: {
disabled: false,
hideSelected: false,
showOptionTooltips: true,
},
});
}
}