Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Autosuggest

Veld leegmaken
.autosuggest

An input type with autosuggest function. Autosuggest must be activated on the form tag in order to automatically submit the form when clicking or pressing enter button after selecting a suggestion. Needed to adjust the autosuggest function to your needs, with data-config attribute you will be able to override some settings.

  • suggestUrl is needed to point the autosuggest to feed itself The following properties are optional:
  • limit, defaults to 5
  • minLength, defaults to 1
  • hint, defaults to true
  • highlight, defaults to true

Markup

<form class="searchForm autosuggest"
        action="/zoeken/search"
        method="GET"
        data-controller="generic/ui/Autosuggest"
        data-config="{
            &quot;suggestUrl&quot;: &quot;https://gateway.apiportaltst.ns.nl/zoeken-mock/nl/suggest?q=&quot;,
            &quot;suggestHeaders&quot;: {&quot;Ocp-Apim-Subscription-Key&quot;: &quot;30d51d78af8b410faf42fa3ea2439a42&quot;},
            &quot;apiType&quot;: &quot;searchv2&quot;,
            &quot;displayValue&quot;:&quot;text&quot;,
            &quot;submitValue&quot;:&quot;text&quot;,
            &quot;highlight&quot;:&quot;true&quot;,
            &quot;limit&quot;: 5,
            &quot;minLength&quot;: 1,
            &quot;extraEventData&quot;: {
                &quot;interaction_location&quot;: &quot;identifier_for_analytics&quot;
            }
        }">
    <label for="searchField" class="alt">Zoeken</label>
    <div class="searchForm__field">
        <input id="searchField" name="q" type="search" class="searchField" placeholder="Waar kunnen we u mee helpen?" autocomplete="off" />
        <div class="searchForm__clear">
            <a href="javascript:void(0)" class="clearButton clearButton--grey">
                <span class="icon">
                    <span class="alt">Veld leegmaken</span>
                </span>
            </a>
        </div>
    </div>
    <div class="searchForm__submit">
        <button type="submit" class="button">
            Zoeken
        </button>
    </div>
</form>