autocomplete.ftl
1 <#macro autocomplete id name suggestionsUrl class="" suggestionsPath="" itemValueFieldName="value" btnColor="light" btnSize="" itemLabelFieldNames="[]" itemTitleFieldNames=itemLabelFieldNames itemDescriptionFieldNames="[]" itemTagsFieldNames="[]" copyFields="[]" currentValue="" currentLabel="" required=false minimumInputLength=1 minimumInputLenghtLabel="#i18n{portal.util.labelMinimumSearchLenght}" searchLabel="#i18n{portal.util.labelSearch}" emptyLabel="#i18n{portal.util.labelNoItem}" additionnalRequestParamInputId="" formStyle="">
2 <div id="${id}" class="lutece-autocomplete dropdown ${class}" data-itemValueFieldName=${itemValueFieldName} data-itemTitleFieldNames=${itemTitleFieldNames} data-suggestionsUrl="${suggestionsUrl}" data-suggestionsPath="${suggestionsPath}" data-minimumInputLength=${minimumInputLength} data-itemDescriptionFieldNames=${itemDescriptionFieldNames} data-itemTagsFieldNames=${itemTagsFieldNames} data-copyFields=${copyFields} data-emptyLabel="${emptyLabel}" data-currentValue="${currentValue}" data-currentLabel="${currentLabel}" data-suggestionItemClass='["list-group-item", "p-3", "list-group-item-action", "cursor-pointer"]' data-titleClass='["mb-0", "fw-bolder"]' data-descriptionClass='["text-muted", "mb-0"]' data-tagClass='["badge", "bg-blue-lt", "me-1"]' data-loaderIconClasses='{"loading": ["ti-loader-2", "icon-rotate"], "error": ["ti-zoom-exclamation", "text-danger"], "search": ["ti-search"]}' data-emptyClass='["list-group-item", "p-3", "text-muted", "text-center"]' data-searchLabel="${searchLabel}">
3 <#if formStyle == "floating">
4 <div class="input-group">
5 </#if>
6 <@formGroup labelFor='${id}' labelKey='${searchLabel}' mandatory=mandatory formStyle="${formStyle}">
7 <#if formStyle != "floating">
8 <div class="input-group">
9 </#if>
10 <@input type='text' name="${name}" id="${id}" placeHolder="${searchLabel}" class="lutece-autocomplete-search-input" value="${currentValue}" />
11 <div id="${id}-dropdown" class="lutece-autocomplete-dropdown dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
12 <ul id="${id}-list-container" class="lutece-autocomplete-result-container list-group list-group-flush overflow-auto bg-white" role="listbox" id="suggestions-list" aria-labelledby="${id}-input" style="max-height:15rem;"></ul>
13 <span id="${id}-lutece-autocomplete-default-assistive" class="sr-only visually-hidden">#i18n{portal.util.message.autocomplete.avalailbleResults}</span>
14 <div class="sr-only lutece-autocomplete-status" role="status" aria-atomic="true" aria-live="polite"></div>
15 </div>
16 <#if formStyle != "floating">
17 <span role="button" class="input-group-text lutece-autocomplete-remove <#if currentValue=''>d-none</#if> text-danger">
18 <i class="ti ti-x fs-5"></i>
19 </span>
20 <span role="button" class="input-group-text">
21 <i id="${id}-search-icon" class="lutece-autocomplete-search-icon ti ti-search"></i>
22 </span>
23 </div>
24 </#if>
25 </@formGroup>
26 <#if formStyle == "floating">
27 <span role="button" class="input-group-text lutece-autocomplete-remove <#if currentValue=''>d-none</#if> text-danger">
28 <i class="ti ti-x fs-5"></i>
29 </span>
30 <span role="button" class="input-group-text">
31 <i id="${id}-search-icon" class="lutece-autocomplete-search-icon ti ti-search"></i>
32 </span>
33 </div>
34 </#if>
35 </div>
36 <script type="module">
37 import LuteceAutoComplete from "./themes/shared/modules/luteceAutoComplete.js";
38 <#if additionnalRequestParamInputId??>
39 new LuteceAutoComplete(document.getElementById(`${id}`), document.getElementById("${additionnalRequestParamInputId}"));
40 <#else>
41 new LuteceAutoComplete(document.getElementById(`${id}`));
42 </#if>
43 </script>
44 </#macro>