Simple_form: Support for Datalist-Tag

[olegsfinest]

Hi Folks, thanks for this amazing gem.

I haven't found anything on simple_form supporting the <datalist> tag beneath input fields.

It was pretty easy to manually add a datalist by just putting it there in html and adding input_html: { list: 'datalist-name' } to the simple_form input.

But still I thought it would be nice, if simple_form would provide integration for this. For example passing a collection/array to the input somehow would be very neat.
If you don't think that is neccesarry, maybe we could add a small howto section somewhere in the wiki, if others are asking themselves the same question.

Thanks and best regards!

[feliperenan]

Hi @olegsfinest

I think it's a good idea have this feature in Simple Form. Are you willing to open a pull request?

[olegsfinest]

I am not too deep into the source code of simple_form. I would love to contribute but cannot say if and when I will find the time to add this feature. Imo it's still a good idea to leave this issue open, until somebody finds the time.

[feliperenan]

To be honest, I don't know if we should include this feature at Simple Form right now. If you really want this feature you can implement by yourself using custom inputs. If more people ask for it, we can think about in the future.

Thanks for the proposal :).

[Petercopter]

IMHO the datalist input is not ready for prime time, so it doesn't belong in simple_form yet.

• It's unsupported in Safari (looks like support is coming) https://caniuse.com/#search=datalist
• There are differences in appearance between Edge/Firefox and Chrome when using values https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value

With that said, I'm giving it a try on a personal project, so I wrote a custom input for it. This might be useful.

= f.association :icon, collection: Icon.order(:name), as: :datalist

class DatalistInput < SimpleForm::Inputs::CollectionSelectInput
  include ActionView::Context

  def input(wrapper_options = nil)
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    out = ActiveSupport::SafeBuffer.new
    out << @builder.text_field(attribute_name, merged_input_options)
    out << tag.datalist(id: attribute_name) { datalist_options.join.html_safe }
  end

  def input_html_options
    _label_method, value_method = detect_collection_methods

    super.merge(list: attribute_name, value: object.send(value_method))
  end

  def datalist_options
    label_method, value_method = detect_collection_methods

    collection.map do |item|
      tag.option(
        item.send(label_method),
        selected: item.send(value_method) == object.send(value_method),
        value: item.send(value_method)
      )
    end
  end
end

[feliperenan]

Nice @Petercopter, thanks for sharing this ❤️

[doncuomo]

@Petercopter @feliperenan

As far as I'm aware since March 2019 all major browsers (including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality.

https://caniuse.com/#search=datalist

Perhaps the time is now?

[feliperenan]

Maybe :see_no_evil: . I'd rather wait for more Users request though :raised_hands: , for time being you can use your own custom component liked suggest above.

Thanks :+1:

[stevenbuccini]

I'd like to voice my support for this. <datalist> can also be used for input[type="range"] to add ticks and tick labels to range sliders. Since <datalist> can be used with a variety of input types, I'm not sure it makes sense to have it as a separate input. I would advocate for a datalist argument to f.input to which you could pass an array or a hash to generate the list of values (and optional labels) in the datalist.