Search

<div class="search spacer-md" data-module="search" data-search-api-endpoint="/components/preview/{5}--{0}?term&#x3D;{0}&amp;pageSize&#x3D;{1}&amp;pageNum&#x3D;{2}&amp;type&#x3D;{3}&amp;datasource&#x3D;{4}&amp;view&#x3D;{5}" data-page-size="10" data-datasource="lowerguid" data-search-term-parameter-name="term" data-type-parameter-name="type">
    <div data-module="card"></div>
    <div class="search-bar">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell medium-10 medium-offset-1 large-8 large-offset-2">
                    <h3 class="search-bar__title">What are you looking for?</h3>
                    <form class="search-bar__form js-search-form" action="/components/preview/search-results-page" method="GET">
                        <label for="navigation" class="search-bar__search-label">What are you looking for?</label>
                        <input type="text" name="term" id="navigation" class="search-bar__search-term js-search-input" autocomplete="off" placeholder="Search" data-autocomplete-url="/data/search-panel-autocomplete.json?text&#x3D;{0}" value="Ireland" />
                        <button class="button-p1 button-p1--icon-only search-bar__search-button js-search-button" />
                    </form>
                </div>
            </div>
        </div>
        <div class="search-bar__autocomplete-wrapper">
            <div class="search-bar__autocomplete-overlay js-autocomplete-overlay"></div>
        </div>
    </div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-10 medium-offset-1 large-8 large-offset-2">
                <div class="search__loader js-search-loader">
                    <div class="loader">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <p class="search__total-label js-search-label"></p>
                <p class="search__message search__message--error js-results-error">Something went wrong...</p>
            </div>
        </div>
    </div>
    <div class="search__results-wrapper js-results-wrapper"></div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="search__button-wrapper medium-offset-5 medium-2">
                <a href="#" class="button-p2 button-p2--default search__load-more js-search-load-more " role="button">Load more</a>
            </div>
        </div>
    </div>
</div>
<div class="search spacer-md" data-module="search" data-search-api-endpoint="{{searchApiEndpoint}}"
     data-page-size="{{pageSize}}" data-datasource="{{datasource}}"
     data-search-term-parameter-name="{{searchBar.searchTermParameterName}}" data-type-parameter-name="{{typeParameterName}}">
    <div data-module="card"></div>
    {{#if searchBar}}
        {{> @cp-search-bar searchTerm=results.searchTerm}}
    {{/if}}
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-10 medium-offset-1 large-8 large-offset-2">
                <div class="search__loader js-search-loader">{{> @loader }}</div>
                <p class="search__total-label js-search-label"></p>
                <p class="search__message search__message--error js-results-error">Something went wrong...</p>
            </div>
        </div>
    </div>
    <div class="search__results-wrapper js-results-wrapper"></div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="search__button-wrapper medium-offset-5 medium-2">
                {{> @cp-button-secondary target=button.target url=button.url text=button.text modifier="default" cssClasses="search__load-more js-search-load-more"}}
            </div>
        </div>
    </div>
</div>
{
  "searchApiEndpoint": "/components/preview/{5}--{0}?term={0}&pageSize={1}&pageNum={2}&type={3}&datasource={4}&view={5}",
  "pageSize": 10,
  "datasource": "lowerguid",
  "typeParameterName": "type",
  "searchBar": {
    "title": "What are you looking for?",
    "placeholderText": "Search",
    "autocompleteEndpoint": "/data/search-panel-autocomplete.json?text={0}",
    "searchTerm": "Ireland",
    "searchTermParameterName": "term",
    "searchPageUrl": "/components/preview/search-results-page"
  },
  "button": {
    "url": "#",
    "text": "Load more"
  }
}

There are no notes for this item.