Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Quick Search in Demo
The Demo for the Quick Search Responsive Handler has an Syntax Error. The last Bracket in the Code Box is wrong...
Replies (3)
Hi,
This quick search feature is built using the KTQuickSearch component
Currently this search feature is already working in the Metronic 8 React Demo 1 as you can check here:
Regards.
var processs = function(search) {
var timeout = setTimeout(function() {
var number = KTUtil.getRandomInt(1, 3);
// Hide recently viewed
recentlyViewedElement.classList.add("d-none");
if (number === 3) {
// Hide results
resultsElement.classList.add("d-none");
// Show empty message
emptyElement.classList.remove("d-none");
} else {
// Show results
resultsElement.classList.remove("d-none");
// Hide empty message
emptyElement.classList.add("d-none");
}
// Complete search
search.complete();
}, 1500);
}
var clear = function(search) {
// Show recently viewed
recentlyViewedElement.classList.remove("d-none");
// Hide results
resultsElement.classList.add("d-none");
// Hide empty message
emptyElement.classList.add("d-none");
}
// Elements
element = document.querySelector("#kt_docs_search_handler_responsive");
if (!element) {
return;
}
wrapperElement = element.querySelector("[data-kt-search-element="wrapper"]");
recentlyViewedElement = element.querySelector("[data-kt-search-element="recently-viewed"]");
resultsElement = element.querySelector("[data-kt-search-element="results"]");
emptyElement = element.querySelector("[data-kt-search-element="empty"]");
preferencesElement = element.querySelector("[data-kt-search-element="preferences"]");
preferencesShowElement = element.querySelector("[data-kt-search-element="preferences-show"]");
preferencesDismissElement = element.querySelector("[data-kt-search-element="preferences-dismiss"]");
// Initialize search handler
searchObject = new KTSearch(element);
// Search handler
searchObject.on("kt.search.process", processs);
// Clear handler
searchObject.on("kt.search.clear", clear);
// Preference show handler
preferencesShowElement.addEventListener("click", function() {
wrapperElement.classList.add("d-none");
preferencesElement.classList.remove("d-none");
});this is your demo code for quick search responsive.
https://preview.keenthemes.com/metronic8/demo1/documentation/general/search.html
Hi,
Could you please provide more info ? Where we can see that search example? Which Metronic version, framework and demo are you referring to ?
Regards,
Sean
