Quick search vs search.. API and controls - clarification re documentation and KTUtil API
Hi Sean and team
The search / quick search documentation is a bit confusing. Apologies.. but would like to confirm:
1. In the Demo, does the navbar search field utilise BOTH the Quick Search and Search JS script Utils (var KTSearch, and var KTLayoutSearch)?
(I am presuming yes, but then unclear how these interact and override each other).
2. When I want to implement server-side retrieved results, I'll need to remove the 'simulated effect' from the var KTLayoutSearch..
Do I replace the
number= KTUtil.getRandomInt(1, 3);with some pseudo code like
number = count of the server returned resultsOR
Can the simulated effect be overrided via the APIs for the main var KTSearch function?
3. When I want the spinner to show while the server is retrieving and updating the results (ie. not a binary situation of no results vs completed results, but while any new results are retrieved and DOM updated),
Do I have to customize the KTLayoutSearch function by messing around the with TimeOut code?
var quickSearchTimeoutMS = infinite when updating results
var quickSearchTimeoutMS = zero after all results updated
var timeout = setTimeout(function() {/* stuff */}, quickSearchTimeoutMS);OR
Does the API for the KTSearch function affect the navbar quicksearch KTLayoutSearch function and spinner effect?
AJAX{
success: update DOM, then do {
var searchElement = document.querySelector("#kt_search_control");
var search = new KTSearch(searchElement);
search.complete(); ////<-- will this will automatically hide the spinner on search being "complete"?
}I'd much prefer to use the built-in functionality to control Search in the manner intended than hack and customise KT utils, but sometimes it's hard to know whether functionality is missing, if I'm overlooking something obvious, if there's some ambiguity in the documentation.
Cheers
Replies (7)
Hi,
Our core component KTSearch used to handle the quick search input and result processing by giving more control of your backend search process.
In our latest v8.1.5, the KTLayoutSearch custom script that uses KTSearch to implement the quick search feature in the layout uses a new example processsAjax function to show how the ajax search results can be retrieved.
In a future update, we will provide a fully working ajax search example as per your request. In the meantime, you can implement it as per your requirements by referring to the latest version of the KTLayoutSearch script.
Regards.
Can't wait for this processsAjax, that would be awsome.
Even if KTSearch UI was mind blowing, and simple UI catching but We didn't used it due to its complexity and custom not soo dynamic (specially js, and so) !, but now since you said you are about to redo things for Ajax, we are really interesting on that.
Thank you Sean.
Hi Sean, thanks heaps for your time.. I've found the API controls for this a bit confusing/overcooked, so I've just hacked the scripts a little.
What I've done is:
QUICK SEARCH RECENT ITEMS:
1. Created a localstorage to hold recent search results (are added to localstr when clicked)
2. Added an X remove button on each of these so that users can remove recent search items in the history pane.
3. Had to update the eventListener so the Quick Search Popover doesn't disappear whenever I remove a saved recent search item.
ie.. this listener currently closes popovers whenever clicked, so had to amend it with a sibling listener.
document.querySelectorAll(".show.menu-dropdown[data-kt-menu-trigger]")QUICK SEARCH RESULTS:
1. Instead of the global var function, I've removed the hide/show items from your original script for the quicksearch into and placed into a regular function, which I call on the count of search results retried from server:
function quickNavBlockProcess(resultsCount){
$("[data-kt-search-element="main"]").addClass("d-none");
if(resultsCount>0){
$("[data-kt-search-element="results"]").removeClass("d-none");
$("[data-kt-search-element="empty"]").addClass("d-none");
} else if(resultsCount==0) {
$("[data-kt-search-element="results"]").addClass("d-none");
$("[data-kt-search-element="empty"]").removeClass("d-none");
} else if (resultsCount==null) {
$("[data-kt-search-element="main"]").removeClass("d-none");
$("[data-kt-search-element="results"]").addClass("d-none");
$("[data-kt-search-element="empty"]").addClass("d-none");
}
}I'm sure there's a way using the API, but this was a much easier approach to trigger from the AJAX scripts.
Cheers
Hi,
Thanks for the feedback. We are looking into this and will get back to you shortly.
Regards.
Hi,
We checked your code and it looks good. We will consider improvement our KTSearch API to create new methods to control the UI more intuitively. Expect this improvement in a future update soon.
Regards.
[EDIT]
I've used a few hacks... and it kinda works.. except the
resultsElement.classList.add("d-none");
emptyElement.classList.remove("d-none");are not 'syncd'.
What's happening, is that state of these to DOM elements are always one step behind. If I have 5 results and then 0 result, the empty element doesn't show unless I do another 0 result search. And if I have 0 results and then 5 results, the empty element remains until i do a follow up search that has results.
I'm certain the behaviour is due to the hacks I'm using.
I feel using the Metronic code would be way easier if I could simply call the
var processs = function(search) {}which I can't, because of it being a variable function instead of a proper function.
Cheers
Hi,
I would suggest you check the HTML markup of the search dropdown and the quick search has multiple modes(recently searched list, default suggestion list, no result found state, and search list). Then you can show/hide each state using the KTSearch API and simple DOM variables to show and hide based on your requirements. Implementing the process function as you suggested can be possible but it may be limited for certain cases so our goal here is to make the UI and backend login fully abstracted for more control. So please refer to the working example of the default KTLayoutSearch script to fully understand the UI part of it.
Regards.
