2

I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4.

The following snippet includes an autocomplete datalist with the data of the namelist object, which was added to the model as an attribute. Said namelist is an ArrayList of a class with the fields int id and String name.

<form th:action="@{/}" method="POST" th:object="${example}">
    <div class="form-group">
        <input list="names" class="form-control" id="nameinput" th:field="${example.num.id}">  </input>
        <datalist id="names">
            <option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
        </datalist>
        <button>submit</button>
    </div>
</form>

The value of the selected option is already bound to example.num.id, which is the expected and desired behaviour. However, when loading the view on a web browser (tested on latest Firefox and Chrome), it is represented like this:

The undesired ids are showing

As you can see, the id's are showing. However, I'm trying to emulate the behaviour of a <select>; the value should not be shown, just the text or label.

Is there a better way to achieve this? Am I not using the datalist properly?

cppstudy
  • 323
  • 4
  • 21
  • 1
    Possible duplicate https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value – Venu Duggireddy Jun 21 '18 at 02:48
  • I don't think that this is a thymeleaf/spring/data-binding related issue. I guess you can expect (more) answers if you update your question and remove all the thymleaf stuff. – Flocke Jun 21 '18 at 09:01
  • @VenuDuggireddy It is. I reckon I wasn't searching correctly. Thank you. – cppstudy Jun 21 '18 at 13:57

0 Answers0