import jQ from "jquery";
import Settings from "../../helpers/settings";
import Utils from "../../helpers/utils";
import InstantSearchEnum from "../../enum/instant-search-enum";
import BaseComponent from "../base-component";
import SearchInput from "./instant-search-element/search-input";
import InstantSearchStyle from "./instant-search-style/instant-search-style";
/**
* Instant search compoment
* @extends BaseComponent
*/
class InstantSearch extends BaseComponent {
/**
* @constructs
*/
constructor() {
super();
};
/**
* Initialize the instant search feature; <br />
* - Apply Instant search feature for all search inputs.<br />
* - Initialize the instant search on mobile.
*/
init() {
var inputElements = jQ('input[name="' + Settings.getSettingValue('search.termKey') + '"]:not([data-disable-instant-search])');
inputElements.each((index, inputElement) => {
var id = 'boost-pfs-search-box-' + index;
var searchBox = new SearchInput(id, jQ(inputElement));
this.addComponent(searchBox);
});
// Build search input for mobile
if (Utils.isMobile()) {
// Clear cache when going back from another page
window.onpageshow = (event) => {
if (event.persisted) {
window.location.reload();
}
}
// Build Suggestion mobile on top
if (Settings.getSettingValue('search.suggestionMobileStyle') !== InstantSearchEnum.Mobile.SuggestionType.STYLE_2) {
var instantSearchMobile = InstantSearchStyle.instantSearchMobile();
this.addComponent(instantSearchMobile);
}
}
};
};
export default InstantSearch;
/*
search component tree:
search
|--- search-input 1
| |--- instant-search-result
| |--- instant-search-result-block-loading
| |--- instant-search-result-block <- instant-search-result-block-popular
| | |--- instant-search-result-item 1 <- instant-search-result-item-popular
| | |--- instant-search-result-item 2 <- instant-search-result-item-popular
| | | .
| | | .
| | |--- instant-search-result-item n
| |--- instant-search-result-block <- instant-search-result-block-collection
| | |--- instant-search-result-item 1 <- instant-search-result-item-collection
| | |--- instant-search-result-item 2 <- instant-search-result-item-collection
| | | .
| | | .
| | |--- instant-search-result-item n
| | .
| |--- instant-search-result-block n
|--- search-input 2
| .
| .
|--- search-input n
|
|--- instant-search-mobile
| |--- search-input
*/