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

Having trouble resolving the kt.search.process error when loading the theme


Hi,

I am having trouble resolving the kt.search.process issue that occurs when loading the theme.

There is no option to attach the screenshot. It would be best if i can share those as well but for now ->

In console window I get this error ->
(e = document.querySelector("#kt_header_search"))

Uncaught TypeError: c.on is not a function
at Object.init (scripts.bundle.js:7:24222)
at HTMLDocument.<anonymous> (scripts.bundle.js:7:24743)

On source window it shows this part highlighted in red->

(e = document.querySelector("#kt_header_search"))

the whole function where the part resides ->

init: function() {
(e = document.querySelector("#kt_header_search")) && (i = e.querySelector('[data-kt-search-element="wrapper"]'),
e.querySelector('[data-kt-search-element="form"]'),
t = e.querySelector('[data-kt-search-element="main"]'),
n = e.querySelector('[data-kt-search-element="results"]'),
r = e.querySelector('[data-kt-search-element="empty"]'),
o = e.querySelector('[data-kt-search-element="preferences"]'),
a = e.querySelector('[data-kt-search-element="preferences-show"]'),
l = e.querySelector('[data-kt-search-element="preferences-dismiss"]'),
s = e.querySelector('[data-kt-search-element="advanced-options-form"]'),
u = e.querySelector('[data-kt-search-element="advanced-options-form-show"]'),
d = e.querySelector('[data-kt-search-element="advanced-options-form-cancel"]'),
e.querySelector('[data-kt-search-element="advanced-options-form-search"]'),
(c = new KTSearch(e)).on("kt.search.process", m),
c.on("kt.search.clear", f),
o && (a && a.addEventListener("click", (function() {
i.classList.add("d-none"),
o.classList.remove("d-none")
}
)),
l && l.addEventListener("click", (function() {
i.classList.remove("d-none"),
o.classList.add("d-none")
}
))),
s && (u && u.addEventListener("click", (function() {
i.classList.add("d-none"),
s.classList.remove("d-none")
}
)),
d && d.addEventListener("click", (function() {
i.classList.remove("d-none"),
s.classList.add("d-none")
}
))))
}

Do let me know if you need any other information.

Theme is purchased from themeforest

Item Id: 4021469

Thank you!


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 (1)


Hi,

If you are not using the header search form(the quick search) you will need to remove src/js/layout/search.js the search handling script from your build and rebuild your assets with gulp or webpack.

If you need any further help please let us know your Metronic version, demo(demo1, demo2, ), framework(HTML, Angular, React, Vue, Laravel, etc), and build method(gulp or webpack).

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