How to include datalist tag in forms

Phoenix Forum Questions / Help
,
1

Hi, is it possible to include the datalist input element in Phoenix forms using Phoenix’s utilitiy functions? I can’t seem to find any documentation on this. Any help will be appreciated.
Many thanks

2

The utility functions are just a set of common helpers, you can easily write your own for more or just put the HTML straight with the eex templates to fill it in too. If you need help with that then paste the template you’ve done so far along with how you want the resultant HTML to look and we can help. :slight_smile:

1 Like
3

Thank you so much for the response.

The reason why I didn’t hard-code the datalist input in the tempate is due to my wanting to have it dynamically created as more input field is desired by the user (please see the “append” option in below template).

I have the following template thus far:

<%= form_for @changeset, @action, [id: :studentForm], fn f -> %> 

    <%= if @changeset.action do %>
        <strong>Form contains errors. Please correct them before resubmitting!</strong>
    <% end %>

    <%= label f, :name %>
    <%= error_tag f, :name%>
    <%= text_input f, :name %> 


    <%= inputs_for f, :sponsors_students, [append: [%Tutor.SponsorStudent{}]], fn sf -> %>
       <%= label sf, :Sponsor_name%> <%= text_input sf, :sponsor_name, oninput: "searchSponsor(event)" %> <%= error_tag sf, :sponsor_name %>
       <%= label sf, :relationship%> <%= text_input sf, :relationship %> <%= error_tag sf, :relationship %>
    <%end%>

    <%= submit "Submit" %>
<% end %>

Instead of “sponsor_name” text_input, I’d like to have “datalist” tag for the “sponsor_name”. And this datalist tag is to be added dynamically with the append option. This is where I got stuck as a hardcoded datalist won’t get the proper id’s etc that one gets with the append option.

I hope I’m making sense here with my explanation. Thanks again so much.
:pray:

4

After the last post, taking your cue, I fiddled around in the file “…/deps/phoenix_html/form.ex”, and lo and behold I found the definitions for the form input utility functions. What I did next:

  1. I appended the following lines into that file:
  @doc """
  Generates a datalist input
  """
  def datalist_input(form, field, opts \\ []) do
    generic_input(:datalist, form, field, opts)
  end
  1. Executed
mix deps.compile
  1. Restarted the server:
mix phx.server
  1. Included this line in the *.html.eex file:
 <%= label sf, :Sponsor_name%> <%= datalist_input sf, :sponsor_name, oninput: "searchSponsor(event)" %> <%= error_tag sf, :sponsor_name %>
  1. And finally got it working:
    Selection_001
    Selection_001991×531 11.9 KB

Thank you so much for the hint and tip. Problem solved perfectly! :pray:

5

You may want to move that code to your project. This file will not have your function the next time you install your dependencies as mix deps.get will pull a clean version of phoenix_html.

4 Likes
6

Yes this. In general I’ve found it good to have a helper module of your own to put all those in, including theming them up for your site as needed. :slight_smile:

2 Likes
7

Ah yes, it was a dirty hack. I’ll get this done. Thank you for the tip :pray:

3 Likes