autocomplete.ftl
1 <#--
2 Macro: autocomplete
3 Description: Generates an autocomplete dropdown
4 Parameters:
5 - id (string): the ID of the autocomplete search input element.
6 - name (string): the name attribute of the hidden input element.
7 - suggestionsUrl (string): the URL to fetch the suggestions from.
8 - suggestionsPath (string, optional): the path to the suggestions list in the response object.
9 - itemValueFieldName (string, optional): the value property of the suggestion object.
10 - btnColor (string, optional): the color of the dropdown button.
11 - btnSize (string, optional): the size of the dropdown button.
12 - itemLabelFieldNames (array, optional): an array of suggestion object property names to display as the title.
13 - itemTitleFieldNames (array, optional): an array of suggestion object property names to display as the description.
14 - itemDescriptionFieldNames (array, optional): an array of suggestion object property names to display as the description.
15 - itemTagsFieldNames (array, optional): an array of suggestion object property names to display as tags.
16 - currentValue (string, optional): the current value of the autocomplete input.
17 - currentLabel (string, optional): the current label displayed on the dropdown button.
18 - required (boolean, optional): whether the input is required or not.
19 - minimumInputLength (integer, optional): the minimum number of characters needed to trigger the search.
20 - minimumInputLenghtLabel (string, optional): the label for the minimum input length information.
21 - searchLabel (string, optional): the label displayed on the dropdown button.
22 - emptyLabel (string, optional): the label displayed when there are no suggestions.
23 - additionnalRequestParamInputId (string, optional): the ID of the input element to get the additional request parameters from.
24 -->
25 <#macro autocomplete id name suggestionsUrl 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="">
26 <div id="${id}" class="lutece-autocomplete dropdown form-group form-floating" 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"]' 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}">
27 <div class="input-group p-0 m-0">
28 <@formGroup formStyle='floating' class='' labelFor='${id}' labelKey='${searchLabel}' mandatory=mandatory>
29 <@input type='text' name="${name}" id="${id}" placeHolder="${searchLabel}" class="lutece-autocomplete-search-input" value="${currentValue}" />
30 <div id="${id}-dropdown" class="lutece-autocomplete-dropdown dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
31 <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>
32 <span id="${id}-lutece-autocomplete-default-assistive" class="sr-only visually-hidden">#i18n{portal.util.message.autocomplete.avalailbleResults}</span>
33 <div class="sr-only lutece-autocomplete-status" role="status" aria-atomic="true" aria-live="polite"></div>
34 </div>
35 </@formGroup>
36 <span role="button" class="input-group-text lutece-autocomplete-remove <#if currentValue=''>d-none</#if> text-danger">
37 <i class="ti ti-x fs-5"></i>
38 </span>
39 <span role="button" class="input-group-text">
40 <i id="${id}-search-icon" class="lutece-autocomplete-search-icon ti ti-search"></i>
41 </span>
42 </div>
43 </div>
44 <script type="module">
45 import LuteceAutoComplete from "./themes/shared/modules/luteceAutoComplete.js";
46 <#if additionnalRequestParamInputId??>
47 new LuteceAutoComplete(document.getElementById(`${id}`), document.getElementById("${additionnalRequestParamInputId}"));
48 <#else>
49 new LuteceAutoComplete(document.getElementById(`${id}`));
50 </#if>
51 </script>
52 </#macro>