<div class="search spacer-md" data-module="search" data-search-api-endpoint="/components/preview/{5}--{0}?term={0}&pageSize={1}&pageNum={2}&type={3}&datasource={4}&view={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={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.