Quick Search Server Side Integration
Hi,
The Metronic HTML Quick Search feature is initialized in core/html/src/js/layout/search.js script and it can be integrated with
a server-side AJAX request by replacing the demo process function with an actual search process function:
// Private functions
var processs = function(search) {
// Hide recently viewed list
mainElement.classList.add("d-none");
// Search process
$.ajax({
url: "search.php",
success: function(result) {
if (result.length > 0) {
// Put results
resultsElement.innerHTML = result;
// Show results
resultsElement.classList.remove("d-none");
// Hide empty message
emptyElement.classList.add("d-none");
} else {
// Hide results
resultsElement.classList.add("d-none");
// Show empty message
emptyElement.classList.remove("d-none");
}
// Complete search
search.complete();
}
});
}The server-side script should return the search in HTML format by following the example search results in the Metronic demo.
Regards.
Replies (3)
Hi Sean, thank you so much for this add.
We wasn't interested in Metronic Search when it was a pure front end solution. (We even Commented it in Webpack)
But now, with this (Server side integration), it would tempt us to use it with our django solution.
Any more détails how the process would go, what Django has to send (I believe a clear dmb html template ?? ).
Are you going to make a Documentation for this.
Thank you sean for this amazing Add-on.
Hi,
Glad to hear that. Yes, Django should respond with the search results in HTML format by using the search results examples provided within the quick search frontend code.
Regards.
Hi, instead of hiding the modal (like the code below) I want to get the customer id or other primary key of the clicked result for further processing.
// Handle select
KTUtil.on(
element,
"[data-kt-search-element="customer"]",
"click",
function () {
modal.hide();
//get the id of the clicked result
}
);
