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

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
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,

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