Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Trouble with Quick Search


Hi, I copied the search.js from /src/ folder and tried to use it. I put it on the bottom of the page but got this error message:
fsearch.js:123 Uncaught TypeError: searchObject.on is not a function How can I solve this problem? and how or where is the place I can put an ajax request to the server? thanks.


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,

Can you please provide more info ?

Which Metronic version you are using? The layout search should be working as the default feature in your demo. Why you are trying to copy the code?

Regardd.



I'm using V.8.1.1. I'm copying it since I really don't know where to begin. I don't know how to send the data to the backend since there is no example on it. so I try to figure out how it works by copying the code. Can you give the example code or documentation instructions on how to send data to the backend? On Metronic V.7 it's easy for me to figure out since the code sends a real request using ajax and there's a backend example either.



Hi,

The search feature comes bundled in the global js file and you can edit the search code in core/html/src/js/layout/search.js

You should handle the search results population in process callback function as shown below using the axios library.


// Private functions
var processs = function(search) {
// Hide recently viewed
mainElement.classList.add("d-none");

axios.post("/search.php", {
query: searchObject.getQuery()
})
.then(function (response) {
// Populate results
resultsElement.innerHTML = response;
// Show results
resultsElement.classList.remove("d-none");
// Hide empty message
emptyElement.classList.add("d-none");

// Complete search
search.complete();
})
.catch(function (error) {
// Hide results
resultsElement.classList.add("d-none");
// Show empty message
emptyElement.classList.remove("d-none");

// Complete search
search.complete();
});
}


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  :(