Datalist in Grails

Question

I am trying to use a datalist in a Grails template in Grails 3.1. I am using it on the _form.gsp template that I generated using an older version of Grails and have now got it working with the new version of Grails. This field is what I am having issues with in the template:

<div class="fieldcontain ${hasErrors(bean: isUsersTakingInkInstance, field: 'userId', 'error')} ">
    <label for="userId">
        <g:message code="isUsersTakingInk.userId.label" default="User Id" />

    </label>
    <g:field list="people" name="userId" value="${this.isUsersTakingInkInstance?.userId}"/>
        <datalist id="people">
            <g:each in="${people}" var="person">
                <option value="${person.people_id}">${person.last_name}, ${person.first_name}</option>
            </g:each>
        </datalist>

</div>

The issue is that on the page, the dropdown does not display anything. I looked in the source and I know that the datalist is populated with data. The field also displays the arrow as it should for an input using a datalist. When I type anything in there, there are no suggestions as there should be for what I am inputting. So what have I done wrong in setting this up?

Have a look at boselecta plugin I used datalist in it for auto complete. I am passing json via websocket and if you review java script you can see how I got it to work using data and value plus other custom fields — V H, Mar 14 '16 at 23:42
I'll keep that in mind, though I really don't want to incorporate another plugin in the application. After further testing, it seems like it is having an issue with the datalist being dynamic. I went ahead and made a static list and everything worked as it should. — Justin Foley, Mar 15 '16 at 19:29
oh sorry the intentions/suggestions of the plugin was to get an idea of how to make it work rather than incorporating it. You could have just downloaded demo site and triggered plugin through it to see how auto complete functionlity works. Glad you got it working. https://github.com/vahidhedayati/grails-boselecta-plugin/blob/master/grails-app/views/boselecta/_genAutoComplete.gsp Is what I meant for you to look at. It probably make more sense if seen running and viewing source that way.. It may help if you need to extend html5 data elements with dataList — V H, Mar 15 '16 at 19:33
I haven't fixed anything. I was just saying that I know that I can get a datalist working with static options, but I need the dynamic option solution. I'll look more into how that plugin achieves it. Thanks. — Justin Foley, Mar 15 '16 at 20:11
well you have to have the dataList element (i.e. the component that holds the values as you say dynamically generated). You can feed the first one with the page load the rest you can use ajax calls to get a listing from a controller and updating just like the plugin. For dynamic content its either going to be websocket or ajax — V H, Mar 15 '16 at 20:53
Bee aware that browser support for datalist is not at all what one could hope fore. I would go for jquery-ui solution with autocomplete instead: http://stackoverflow.com/a/9656550/1737590 — stenix, Jun 07 '16 at 07:43

score 0 · Answer 1 · answered Mar 15 '16 at 22:30

0

I found my problem. I forgot to set the type of the field to "search". So, the field line should read:

<g:field list="people" name="userId" type="search" value="${this.isUsersTakingInkInstance?.userId}"/>

answered Mar 15 '16 at 22:30

Justin Foley

149
2
14

Datalist in Grails

1 Answers1