addsearch-search-ui
Version:
JavaScript library to develop Search UIs for the web
230 lines (192 loc) • 5.28 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<meta charset="UTF-8">
<title>AddSearch Search UI: Range facets type slider demo</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@0.8/dist/addsearch-js-client.min.js"></script>
<script src="../../dist/addsearch-search-ui.min.js"></script>
<link rel="stylesheet" href="../../dist/addsearch-search-ui.min.css"/>
<link rel="stylesheet" href="styles.css"/>
<script>
// Responsive menu
function toggleMobileMenu() {
var style = document.querySelector('aside').style;
style.display = style.display === 'block' ? 'none' : 'block';
}
</script>
</head>
<body>
<header>
<div class="mobilemenu" onclick="toggleMobileMenu();">☰</div>
<section>
<div>
<div id="searchfield-container"></div>
<div id="autocomplete-container"></div>
</div>
</section>
</header>
<aside>
<div class="mobilemenu close" onclick="toggleMobileMenu();">✖</div>
<section>
Active filters:
<div id="active-filters-container"></div>
</section>
<section>
Facets:
<div id="facets-container"></div>
</section>
<section>
Filters:
<div id="area-container"></div>
</section>
<section>
Range facets:
<div id="range-facets-container"></div>
</section>
<section>
Range slider:
<div id="range-slider-container"></div>
</section>
<section>
Rating slider:
<div id="rating-slider-container"></div>
</section>
</aside>
<main>
<section id="sort">
Sort by:
<div id="sortby-container"></div>
</section>
<section>
Search results
<div id="results-container"></div>
</section>
<section>
Load more results:
<div id="loadmore-container"></div>
</section>
</main>
<script>
// AddSearch JS client with an example index. Get your own SITEKEY by signing up at www.addsearch.com
var client = new AddSearchClient('4f4ddc74e528f1546e39909b77133619');
// Search UI
var conf = {
matchAllQuery: true,
fieldForInstantRedirect: 'custom_fields.idMeal'
};
var searchui = new AddSearchUI(client, conf);
searchui.searchField({
containerId: 'searchfield-container',
autofocus: true,
placeholder: 'Keyword..',
button: 'Search',
searchAsYouType: false
});
searchui.registerHandlebarsHelper('test', function (item) {
if (item && item.img_url) {
return item.img_url;
} else if (item && item.image_url) {
return item.image_url;
}
});
var searchResultsTemplate = `
<div class="addsearch-searchresults">
{{#if resultcount}}
{{> numberOfResultsTemplate }}
{{/if}}
{{#each hits}}
<div class="item">
<span class="main-image">
<img src="{{test custom_fields}}" alt="{{custom_fields.strMeal}}" />
</span>
<span>
<h3>
{{custom_fields.title}}
</h3>
<div>Price: {{custom_fields.price}} eur</div>
<div>Rating: {{custom_fields.rating}}</div>
<div>Random: {{custom_fields.random}}</div>
</span>
</div>
{{/each}}
</div>
`;
searchui.searchResults({
containerId: 'results-container',
template: searchResultsTemplate
});
searchui.activeFilters({
containerId: 'active-filters-container'
});
searchui.sortBy({
containerId: 'sortby-container',
options: [
{
label: 'Date: Oldest first',
sortBy: 'date',
order: 'asc'
},
{
label: 'Most relevant first',
sortBy: 'relevance',
order: 'desc'
},
{
label: 'Date: Newest first',
sortBy: 'date',
order: 'desc'
}
]
});
client.addFacetField('custom_fields.category');
searchui.facets({
containerId: 'facets-container',
field: 'custom_fields.category',
advancedSticky: true
});
searchui.filters({
containerId: 'area-container',
type: AddSearchUI.FILTER_TYPE.RADIO_GROUP,
options: {
american: {
label: 'Category 1',
filter: {"custom_fields.category": "category_1"}
},
british: {
label: 'Category 2',
filter: {"custom_fields.category": "category_2"}
},
french: {
label: 'Category 3',
filter: {"custom_fields.category": "category_3"}
}
}
});
client.addStatsField('custom_fields.price');
searchui.rangeFacets({
containerId: 'range-slider-container',
field: 'custom_fields.price',
type: AddSearchUI.RANGE_FACETS_TYPE.SLIDER,
styles: {
trackColor: 'cyan',
progressColor: '#f23d5f'
}
});
client.addStatsField('custom_fields.rating');
searchui.rangeFacets({
containerId: 'rating-slider-container',
field: 'custom_fields.rating',
type: AddSearchUI.RANGE_FACETS_TYPE.SLIDER,
step: 0.1
});
searchui.loadMore({
containerId: 'loadmore-container',
type: AddSearchUI.LOAD_MORE_TYPE.BUTTON
});
searchui.start();
</script>
</body>
</html>