Thymeleaf : Datalist autocomplete

 <div class="col-8 mb-1">

    <small class="form-text text-muted">Localité sinistre</small>

    <input class="form-control form-control-sm" list="listeLocalites" type="text" id="localite" th:field="*{localiteLieuSinistreDossier}"  placeholder="Localité lieu sinistre..."/>

    <datalist id="listeLocalites" name="localiteLieuSinistreDossier">

        <option th:if="${dossier.localiteLieuSinistreDossier}" th:each="ls:${listeLocalites}" th:value="${ls.codeLocalite}" th:label="${ls.codePostal.codePostal + ' ' + ls.libelleLocalite + ' ' + ls.delegation.libelleDelegation + ' ' + ls.delegation.gouvernorat.libelleGouvernorat}" th:selected="${dossier.localiteLieuSinistreDossier.codeLocalite==ls.codeLocalite}"></option>

        <option th:under="${dossier.localiteLieuSinistreDossier}" th:each="ls:${listeLocalites}" th:value="${ls.codeLocalite}" th:label="${ls.codePostal.codePostal + ' ' + ls.libelleLocalite + ' ' + ls.delegation.libelleDelegation + ' ' + ls.delegation.gouvernorat.libelleGouvernorat}"></option>

    </datalist>

</div>

Thymeleaf : Select dépendante

 <div class="col-2">

<small class="form-text text-muted">Gouvernorat</small>

<select name="gouvernorats" id="gouvernorats" class="form-control form-control-sm" title="Choisir gouvernorat...">

<option value=""></option>

<option th:if="${dossier.localiteLieuSinistreDossier}" th:each="gs:${listeGouvernorats}" th:value="${gs.codeGouvernorat}" th:text="${gs.libelleGouvernorat}" th:selected="${dossier.localiteLieuSinistreDossier.delegation.gouvernorat.codeGouvernorat==gs.codeGouvernorat}">Wireframe</option>

<option th:unless="${dossier.localiteLieuSinistreDossier}" th:each="gs:${listeGouvernorats}" th:value="${gs.codeGouvernorat}" th:text="${gs.libelleGouvernorat}">Wireframe</option>

</select>

</div>

<div class="col-2">

<small class="form-text text-muted">Délégation</small>

<select name="delegations" id="delegations" class="form-control form-control-sm" title="Choisir délégation...">

<option value=""></option>

<option th:if="${dossier.localiteLieuSinistreDossier}" th:each="des:${listeDelegations}" th:id="${des.gouvernorat.codeGouvernorat}" th:value="${des.codeDelegation}" th:text="${des.libelleDelegation}" th:selected="${dossier.localiteLieuSinistreDossier.delegation.codeDelegation==des.codeDelegation}">Wireframe</option>

<option th:unless="${dossier.localiteLieuSinistreDossier}" th:each="des:${listeDelegations}" th:id="${des.gouvernorat.codeGouvernorat}" th:value="${des.codeDelegation}" th:text="${des.libelleDelegation}">Wireframe</option>

</select>

</div>

<script type="text/javascript">

$('#gouvernorats').change(function() {

    $('#delegations option').hide();

    $('#delegations option[id="' + $(this).val() + '"]').show();

    // add this code to select 1'st of localite automaticaly 

    // when gouvernorat changed

    if ($('#delegations option[id="' + $(this).val() + '"]').length) {

        $('#delegations option[id="' + $(this).val() + '"]').first().prop('selected', true);

        $('#delegations').prop('disabled', false);

    }

    // in case if there's no corresponding localite: 

    // reset select element

    else {

        //alert("B");

        $('#delegations').val('pas de délégations');

        

        $('#delegations').prop('disabled', false);

    };

});

</script>