https://servizi.comunemalcesine.it/openweb/trasparenza/js/autocomplete.js

1/**
2 * 
3 * Questo file non è altro che un estrazione per la puntuale funzionalità dei componenti "auto-complete"
4 * di bootstrap italia 2  
5 * 
6 * */
7
8const DATA_AUTOCOMPLETE = 'data-bs-autocomplete';
9const SELECTOR_SEARCH = 'input[' + DATA_AUTOCOMPLETE + '][type="search"]'
10const inputRicerca = document.querySelector(SELECTOR_SEARCH);
11
12inputRicerca.addEventListener("input", (e) => searchAutoComplete());
13
14const CLASS_NAME_SHOW = 'autocomplete-list-show';
15const CLASS_NAME_AUTOCOMPLETE = 'autocomplete';
16
17
18const autoCompleteElement = document.querySelector(`.${CLASS_NAME_AUTOCOMPLETE}`);
19const autocompleteListElement = document.createElement('ul');
20autocompleteListElement.classList.add('autocomplete-list');
21inputRicerca.parentNode.insertBefore(autocompleteListElement, inputRicerca.nextSibling);
22
23function getItems() {
24    try {
25        return JSON.parse(inputRicerca.getAttribute(DATA_AUTOCOMPLETE))
26    } catch (error) {
27        console.error('[InputSearchAutocomplete] invalid data provided for ' + DATA_AUTOCOMPLETE + ' attribute', error)
28        return []
29    }
30}
31
32function createOption(link, text, label, icon) {
33    if (typeof document === 'undefined') {
34      return
35    }
36    const option = document.createElement('li')
37    const anchor = document.createElement('a')
38    anchor.href = link
39    anchor.innerHTML = `
40      ${icon}
41      <span class="autocomplete-list-text">
42        <span>${text}</span>
43        ${label}
44      </span>
45    `
46    anchor.onclick = () => {
47      autocompleteListElement.classList.remove(CLASS_NAME_SHOW);
48    }
49    option.appendChild(anchor)
50  
51    return option
52  }
53
54
55// Public
56function searchAutoComplete() {
57    const value = inputRicerca.value
58
59    //!!! $autocomplete.empty()
60    autocompleteListElement.innerHTML = ''
61
62    if (value) {

63      getItems().forEach((item) => {
64        let markText = new RegExp('(' + value + ')', 'gi')
65        let optionText = item.text.replace(markText, '<mark>$1</mark>')
66        let optionLabel = item.label ? '<em>' + item.label + '</em>' : ''
67        let optionIcon = item.icon ? item.icon : ''
68        let optionLink = item.link ? item.link : '#'
69
70        if (optionText.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
71          autocompleteListElement.classList.add(CLASS_NAME_SHOW)
72          autocompleteListElement.appendChild(createOption(optionLink, optionText, optionLabel, optionIcon))
73        }
74      })
75    } else {
76      autocompleteListElement.classList.remove(CLASS_NAME_SHOW)
77    }
78}
79