Front-end Search script for Metronic - migrating from jqueryUI autocomplete

Hi Sean

Struggling how to apply this: https://preview.keenthemes.com/html/metronic/docs/general/search

Context / Background:
I have previously used jquery-ui autocomplete and custom built ajax to pull results based on server-sql queries, using LIKE function.

BUT it's unclear if there is an 'autocomplete' JS library in Metronic and it's unclear what the steps to implement are.

QUESTIONS:
1. DOES Metronic provides a library to perform similarly to JS-UI autocomplete:
-> Is there an equivalent to the JQuery UI autocomplete that is buried in the KT script-bundle that takes over? For example, "searchObject" the autocomplete function? If so, what are the requirements for this?

2. OR IF I still need to use ajax/autocomplete JS on top of KT search:
-> what is the input and output routes? do I post the value coming from const handleInput? or const inputField? or directly from the ?
-> what's the variable or field name that I send my AJAX response back to? I'm assuming it's "resultsElement", but if so, then why all the extra layer of coding with data-labels when I could just point to a $(selector)?

3. WHAT WOULD the steps to implement (and configure be).. assuming I add more than once, as I need to update the placeholder id names used by keenthemes (ie. which elements are safe to rename with breaking the functionality and which are required to be renamed for re-use)
-> do I replace my input ID to the const handleInput, element.querySelector("[my-data-input-attribute="input"]")
-> do I replace my input ID to the element = document.querySelector('#my_search_handler_basic');


I hope this makes sense. I am fully able to build search end-to-end (fullstack).. I understand the concepts, but I am not sure where and how Metronic Search fits into the end-to-end.

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,

Sorry for the late reply.

You can use our KTSearch component to build a custom select with backend data source integration.

The working examples of this component can be checked:src/js/layout/search.js

You can replace the timeout code with your server-side ajax request handler code:

var timeout = setTimeout(function() {
...
})

And in the ajax response handle you can get the HTML code from the backend response and append to the result list element:

resultsElement.innerHTML = "....HTML code search results...";

Regards

Hey Sean, no worries re delay. I appreciate your help immensely, and I'm certainly getting my money's worth of support ;P :-)

I'll checkout the link and have a look with fresh eyes.

Cheers!

Hi happy,

It's my pleasure. if you need any further help please do let us know.

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