The HawkSearch Handlebars UI package allows you to add a highly-customizable search results page to your website powered by HawkSearch.
npm init to generate one.npm install --save @bridgeline-digital/hawksearch-handlebars-ui to install the latest version.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HawkSearch Handlebars UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
var HawkSearch = HawkSearch || {};
HawkSearch.config = {
clientId: 'YOUR_CLIENTID_HERE'
};
</script>
<script src="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js" defer></script>
</head>
<body>
<h1>HawkSearch Handlebars UI</h1>
<hawksearch-search-field></hawksearch-search-field>
<hawksearch-search-results></hawksearch-search-results>
</body>
</html>
This library is also available through jsDelivr, a high-performance global content delivery network built to consume npm packages.
To configure your website to use the CDN, simply update your HTML to import the script file, set your [Configuration)(models/Configuration.html), and add the appropriate elements to your page. Below is a basic sample implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HawkSearch Handlebars UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
var HawkSearch = HawkSearch || {};
HawkSearch.config = {
clientId: 'YOUR_CLIENTID_HERE'
};
</script>
<script src="//cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@2.0.0-beta.12/dist/hawksearch-handlebars-ui.js" defer></script>
</head>
<body>
<h1>HawkSearch Handlebars UI</h1>
<hawksearch-search-field></hawksearch-search-field>
<hawksearch-search-results></hawksearch-search-results>
</body>
</html>
Note: It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future. For example, instead of including the script at https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.js, you can use https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@2.0.0-beta.12/dist/hawksearch-handlebars-ui.js.
Configuration is set through the HawkSearch.config global object. For more information, see HawkSearchConfig.
This event is fired after the HawkSearch Handlebars UI has been loaded. Developers can hook into this event to define custom Handlebars partials.
addEventListener('hawksearch:initialized', (event) => {
HawkSearch.handlebars.registerPartial('custom-partial', 'HTML here');
});
This event is fired before every autocomplete query. This can be used to modify the raw request sent to the HawkSearch API.
addEventListener('hawksearch:before-autocomplete-executed', (event) => {
const autocompleteRequest = event.detail;
console.log(autocompleteRequest);
});
This event is fired after every autocomplete query. This can be used to modify the raw response received from the HawkSearch API.
addEventListener('hawksearch:after-autocomplete-executed', (event) => {
const autocompleteResponse = event.detail;
console.log(autocompleteResponse);
});
This event is fired after every autocomplete query prior to data binding.
addEventListener('hawksearch:autocomplete-completed', (event) => {
const autocompleteResponse = event.detail;
console.log(autocompleteResponse);
});
Note: This object is the processed AutocompleteResponse model, not the initial response from HawkSearch.
This event is fired after before every search operation. This can be used to modify the raw request sent to the HawkSearch API.
addEventListener('hawksearch:before-search-executed', (event) => {
const searchRequest = event.detail;
console.log(searchRequest);
});
This event is fired after every search operation. This can be used to modify the raw response received from the HawkSearch API.
addEventListener('hawksearch:after-search-executed', (event) => {
const searchResponse = event.detail;
console.log(searchResponse);
});
This event is fired after every search operation prior to data binding.
addEventListener('hawksearch:search-completed', (event) => {
const searchResponse = event.detail;
console.log(searchResponse);
});
Note: This object is the processed SearchResponse model, not the initial response from HawkSearch.
This event is fired after before every recommendations operation. This can be used to modify the raw request sent to the HawkSearch API.
addEventListener('hawksearch:before-recommendations-executed', (event) => {
const recommendationsRequest = event.detail;
console.log(recommendationsRequest);
});
This event is fired after every recommendations operation. This can be used to modify the raw response received from the HawkSearch API.
addEventListener('hawksearch:after-recommendations-executed', (event) => {
const recommendationsResponse = event.detail;
console.log(recommendationsResponse);
});
This event is fired after every recommendations operation prior to data binding.
addEventListener('hawksearch:recommendations-completed', (event) => {
const recommendationsResponse = event.detail;
console.log(recommendationsResponse);
});
Note: This object is the processed RecommendationsResponse model, not the initial response from HawkSearch.