addsearch-search-ui
Version:
JavaScript library to develop Search UIs for the web
258 lines (214 loc) • 6.08 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 filters 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.6/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';
}
if (window) {
window.onresize = function () {
alignAutocomplete(document.querySelector('#autocomplete-container'));
};
}
</script>
</head>
<body>
<header>
<div class="mobilemenu" onclick="toggleMobileMenu();">☰</div>
<section>
<div>
<div id="searchfield-container"></div>
</div>
<div>
Sort by:
<div id="sortby-container"></div>
</div>
</section>
</header>
<aside>
<div class="mobilemenu close" onclick="toggleMobileMenu();">✖</div>
<section>
Active filters:
<div id="active-filters-container"></div>
</section>
<section>
Range filter:
<div id="range-filters-container"></div>
</section>
<section>
Filter:
<div id="strMeal-filters-container"></div>
</section>
<section>
Area:
<div id="area-facets-container"></div>
</section>
<section>
Main ingredient:
<div id="ingredient-facets-container"></div>
</section>
<section>
Category:
<div id="category-facets-container"></div>
</section>
</aside>
<main>
<section>
Search results
<div id="results-container"></div>
</section>
<section>
Load more results:
<div id="loadmore-container"></div>
</section>
<section>
Pagination:
<div id="pagination-container"></div>
</section>
</main>
<script id="search-results-template" type="text/x-handlebars-template">
<div class="addsearch-searchresults">
{{#if resultcount}}
{{> numberOfResultsTemplate }}
{{/if}}
{{#each hits}}
<div class="item">
<span class="main-image">
<img src="https://demo-cdn.addsearch.com/fooddemo-1cfa4d/imgs/thumb-{{id}}.jpg" alt="{{custom_fields.strMeal}}" />
</span>
<span>
<h3>
{{custom_fields.strMeal}}
</h3>
Price: {{formatPrice custom_fields.price "en-US" "USD"}}<br />
Calories: {{custom_fields.cal}}<br />
Special diets:
{{#each custom_fields.diets}}
<b>{{this}}</b>
{{/each}}
{{#unless custom_fields.diets}}n/a{{/unless}}
</span>
</div>
{{/each}}
</div>
</script>
<script>
// AddSearch JS client with an example index. Get your own SITEKEY by signing up at www.addsearch.com
var client = new AddSearchClient('5c05678877cce33062c1dce9e1819ed0');
// client.setNumberOfFacets(20);
// Get min and max prices from results
client.addStatsField('custom_fields.price');
client.addStatsField('custom_fields.cal');
// Define buckets for calorie filters
var ranges = [
{'to': 400},
{'from': 400, 'to': 500},
{'from': 500, 'to': 600},
{'from': 600}
];
client.addRangeFacet('custom_fields.cal', ranges);
// Special diets as facets
client.addFacetField('custom_fields.strArea');
client.addFacetField('custom_fields.strIngredient1');
client.addFacetField('custom_fields.strCategory')
// Search UI
var conf = {
matchAllQuery: true
};
var searchui = new AddSearchUI(client, conf);
searchui.filters({
containerId: 'strMeal-filters-container',
type: AddSearchUI.FILTER_TYPE.RADIO_GROUP,
options: {
op1: {
label: 'Mince Pies',
filter: {'custom_fields.strMeal': 'Mince Pies'}
},
op2: {
label: 'Beef Sunday Roast',
filter: {'custom_fields.strMeal': 'Beef Sunday Roast'}
},
op3: {
label: 'Beef and Oyster pie',
filter: {'custom_fields.strMeal': 'Beef and Oyster pie'}
}
}
});
searchui.searchField({
containerId: 'searchfield-container',
autofocus: true,
placeholder: 'Keyword..',
button: 'Search'
});
searchui.searchResults({
containerId: 'results-container',
template: document.querySelector('#search-results-template').innerHTML
});
searchui.activeFilters({
containerId: 'active-filters-container'
});
searchui.filters({
containerId: 'range-filters-container',
type: AddSearchUI.FILTER_TYPE.RANGE,
label: 'Calorie range',
labelShort: 'Calories',
field: 'custom_fields.cal',
validator: '^[\\d]*$'
});
searchui.facets({
containerId: 'area-facets-container',
field: 'custom_fields.strArea',
advancedSticky: true
});
searchui.facets({
containerId: 'ingredient-facets-container',
field: 'custom_fields.strIngredient1',
advancedSticky: true
});
searchui.facets({
containerId: 'category-facets-container',
field: 'custom_fields.strCategory',
advancedSticky: true
});
searchui.loadMore({
containerId: 'loadmore-container',
type: AddSearchUI.LOAD_MORE_TYPE.BUTTON
});
searchui.pagination({
containerId: 'pagination-container'
});
searchui.sortBy({
containerId: 'sortby-container',
options: [
{
label: 'Sort by relevance',
sortBy: 'relevance',
order: 'desc'
},
{
label: 'Oldest first',
sortBy: 'date',
order: 'asc'
},
{
label: 'Most expensive first',
sortBy: 'custom_fields.price',
order: 'desc'
}
]
});
searchui.start();
</script>
</body>
</html>