Question

What is the best way to construct a html5 datalist with mojolicious?

I looked for a tag helper but did not find a tag helper for constructing it.

Here is an example of a datalist:

<datalist id="frameworks">
    <option value="MooTools">
    <option value="Moobile">
    <option value="Dojo Toolkit">
    <option value="jQuery">
    <option value="YUI">
</datalist>

The list is dynamic and is fetched from a db, so i cannot use a static html chunk.

There are similar tag helpers, e.g. for a <select> tag I can put into my template:

%= select_field country => [[Germany => 'de'], 'en']

which produces:

<select name="country">
  <option value="de">Germany</option>
  <option value="en">en</option>
</select>

but I couldn't find anything regarding a datalist in the default tag helpers.

Was it helpful?

Solution

It's been a while, but maybe will find it useful.

In the controller, you need to have an array with some items. Let's create it:

my @levelsArray = ();
for (my $i=0;$i<10;$i++){
    push @levelsArray, "level00".$i;
}

After that, send it to the template:

get '/index' => sub {
    my ( $mojo ) = @_;
    $mojo -> stash ('levelsArray' => \@levelsArray);
    $mojo -> render (template => 'index' );
};

and finally, render it using:

<%= select_field 'levelSelected' => [ @{ stash('levelsArray') }] %>

OTHER TIPS

I'm not sure how this is mojolicious specific, but wouldn't simple html in your template would be enough:

<datalist id="frameworks">
    <option value="MooTools">
    <option value="Moobile">
    <option value="Dojo Toolkit">
    <option value="jQuery">
    <option value="YUI">
</datalist>
<input type="text" list="frameworks" />

EDIT

Let me clarify, this wouldn't be static HTML in your template...you would fetch your data within controller and pass that data to template which would construct this kind of HTML with it's templating engine.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top