Prekočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Späť

Autocomplete

Autocomplete komponent sa nenaväzuje priamo na input, ale na prázdny div, do ktorého je potom pomocou scriptu dynamicky vložený. Komponent vieme inicializovať dvomi spôsobmi, záleží na tom, aký source mu poskytujeme.

Použitie

Aby tento komponent fungoval správne, prázdnemu divu nastavíme tieto atribúty :

  • data-autocomplete - Na tento atribút sa pripína script, ktorý dynamicky vloží input do prázdneho divu
  • data-autocomplete-source="["item 1", "item 2"]" - Poskytneme source, teda zoznam, v ktorom bude autocomplete vyhľadávať. Toto je príklad statického zoznamu.
  • data-autocomplete-id - Identifikátor autocompletu, je potrebný na inicializáciu
  • data-autocomplete-name - Meno autocompletu, je potrebné na inicializáciu

Automatická inicializácia - Statický source

Inicializácia prebehne v súbore main.js

                        
<script>
    document.querySelectorAll('[data-autocomplete]').forEach((el) => {
        autocomplete(el).init();
    });
</script>
                        
                    

<label class="govuk-label" for="ukazka1">Ukážka autocomplete</label>
<div data-autocomplete data-autocomplete-source="[&quot;item 1&quot;, &quot;item 2&quot;]" data-autocomplete-id="ukazka1" data-autocomplete-name="ukazka1" class="govuk-!-margin-bottom-3"></div>

Teda source bude data-autocomplete-source="[&quot;item 1&quot;, &quot;item 2&quot;]"

Manuálna inicializácia - Dynamický source

Inicializácia prebehne pre konkrétny autocomplete. Tento prístup použijeme, keď potrebujeme napríklad, získať source z API odpovede (response).

                        
<script>
    const profesiaAutocompleteSource = (query, populateResults) => {
        const results = ['Profesia 1', 'Profesia 2', 'Profesia 3'];
        const filteredResults = results.filter(
            (result) => result.indexOf(query) !== -1
        );
        populateResults(filteredResults);
    };
    document
    .querySelectorAll('[data-autocomplete-id="ukazka2"]')
    .forEach((el) => {
        //Toto je globálny objekt vytvorený v main.js, kde je dostupná inicializačná funkcia autocomplete
        window._components
        .autocomplete(el, { source: profesiaAutocompleteSource })
        .init();
    });
</script>

V tomto prípade však musíme z prázdneho divu atribút data-autocomplete-source vymazať!


<label class="govuk-label" for="ukazka2">Ukážka autocomplete</label>
<div data-autocomplete data-autocomplete-id="ukazka2" data-autocomplete-name="ukazka2" class="govuk-!-margin-bottom-3"></div>