{% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
{%
    set inputWithSearch = {
         "id": 'search-field',
         "width": '20',
        "label": {
            "text": "Search",
            "id": "search-field-label",
            "classes": "ons-u-pl-xl"
        },
        "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
        "accessiblePlaceholder": true,
        "autocomplete": "off"
    }
%}

{{
    onsAutosuggest({
        "id": "search-input-autosuggest",
        "input": inputWithSearch,
        "containerClasses": "ons-autosuggest--header",
        "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
        "ariaYouHaveSelected": "You have selected",
        "ariaMinChars": "Enter 3 or more characters for suggestions.",
        "ariaOneResult": "There is one suggestion available.",
        "ariaNResults": "There are {n} suggestions available.",
        "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
        "moreResults": "Continue entering to improve suggestions",
        "resultsTitle": "Suggestions",
        "resultsTitleId": "results-suggestions",
        "autosuggestData": "/examples/data/search-index.json",
        "noResults": "No suggestions found",
        "typeMore": "Continue entering to get suggestions"
    })
}}