Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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
}
);



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(