Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(