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

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 55

  • @BrianVoelker
    @BrianVoelker 6 месяцев назад +2

    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
      @SupeRails  6 месяцев назад +2

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

  • @MuhammadAbdullah-ft4kc
    @MuhammadAbdullah-ft4kc 2 года назад +9

    You are a great teacher. Keep it up!

    • @SupeRails
      @SupeRails  Год назад

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

  • @duybao2136
    @duybao2136 Год назад +2

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

    • @SupeRails
      @SupeRails  Год назад +1

      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

  • @ddd2283
    @ddd2283 2 года назад +3

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

    • @rahulk6130
      @rahulk6130 Год назад +1

      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 ?

  • @Art_Volga
    @Art_Volga 2 месяца назад

    Ролик конечно на английском, но комментарий напишу на родном языке. Спасибо тебе за твои труд. Я начинающий в Rails и твои видео решают некоторые мои проблемы по rails 7

  • @assolyka
    @assolyka 4 месяца назад +1

    I tried to use it in my project with bootstrap installed, but seemed it was broken. The styles doesn't work correctly.
    Is it necessary to use tailwind and stimulus ?

  • @hsxn_sports
    @hsxn_sports 6 месяцев назад +1

    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
      @SupeRails  6 месяцев назад

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

    • @hsxn_sports
      @hsxn_sports 6 месяцев назад

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

    • @hsxn_sports
      @hsxn_sports 6 месяцев назад

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

    • @SupeRails
      @SupeRails  6 месяцев назад

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

  • @volotot4701
    @volotot4701 Год назад

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

  • @neerajkeriya
    @neerajkeriya 2 года назад +2

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

    • @SupeRails
      @SupeRails  2 года назад +1

      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_
      @FoodTrips_ 2 года назад

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

  • @joseluismoreyrajr.7598
    @joseluismoreyrajr.7598 7 месяцев назад +1

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

    • @SupeRails
      @SupeRails  6 месяцев назад

      oh its a regular external white apple keyboard

  • @jeanchavez6048
    @jeanchavez6048 Год назад +2

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

    • @SupeRails
      @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
      @jeanchavez6048 Год назад +1

      @@SupeRails thanks, i'm your fan

  • @VirtualHealthCare
    @VirtualHealthCare Год назад +1

    Great tutorial

  • @MichaelMonin-u2c
    @MichaelMonin-u2c Год назад

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

  • @hassanbawazir216
    @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?

  • @FoodTrips_
    @FoodTrips_ 2 года назад +1

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

    • @SupeRails
      @SupeRails  Год назад +1

      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

  • @ViktorSchmidt
    @ViktorSchmidt 2 года назад +1

    Again, useful and great!

    • @SupeRails
      @SupeRails  Год назад

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

  • @tetyanagon3342
    @tetyanagon3342 10 месяцев назад

    TY!!! Nice job.

  • @volotot4701
    @volotot4701 Год назад

    Awesome and very helpfull, thanks a lot!

  • @danielecasal2961
    @danielecasal2961 Год назад +1

    does this work with rails 7 and simple_form gem?

    • @SupeRails
      @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
      @danielecasal2961 Год назад +2

      @@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
      @3pedroneto Год назад

      @@danielecasal2961 I'm getting this problem too

    • @denvernovencido1925
      @denvernovencido1925 Год назад +1

      Im getting this error too when using the version 2.4.0

    • @RyanJeffB
      @RyanJeffB Год назад

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

  • @JorgeRodz04
    @JorgeRodz04 9 месяцев назад

    Thank you!

  • @h2w..
    @h2w.. Год назад

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

    • @rahulk6130
      @rahulk6130 Год назад

      Working fine with me. Please check my post above.

  • @andyhemphill
    @andyhemphill Год назад

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

    • @SupeRails
      @SupeRails  Год назад

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

    • @andyhemphill
      @andyhemphill Год назад

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

    • @andyhemphill
      @andyhemphill Год назад

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

  • @h2w..
    @h2w.. Год назад

    Does not work with rails 7 and botstrap 5

    • @rahulk6130
      @rahulk6130 Год назад

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

  • @ledockol
    @ledockol 2 года назад +1

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

  • @azizdevfull
    @azizdevfull 2 года назад +1

    useful video bro : )

  • @remotronic
    @remotronic 2 года назад +1

    👍

  • @MuhammadMudasir-q9x
    @MuhammadMudasir-q9x Год назад

    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,
    },
    });
    }
    }