ninja-keys icon indicating copy to clipboard operation
ninja-keys copied to clipboard

Can we implement a search using async data from a server?

Open fayazara opened this issue 3 years ago • 7 comments

We're planning on making the ninja-keys as the primary search window for our tool. It works well for items which are defined already, but is there a way to make api requests and get data and show them in Ninja keys command palette?

CC: @ssleptsov

fayazara avatar Dec 07 '22 12:12 fayazara

@fayazara Maybe a bit late, but this exactly what I've done for my product. Needs a bit of work, but not too complicated.

search

Anything below "Content Types" is static. Then below that you have all the search results.

eelcoj avatar Jan 30 '23 04:01 eelcoj

@eelcoj how did you do it? did you use ninja-keys?

elalemanyo avatar Feb 27 '23 10:02 elalemanyo

@elalemanyo Yes, all it really does is fire a request to backend's search. The json response is then changed to match the data structure ninja keys need.

eelcoj avatar Feb 27 '23 12:02 eelcoj

@eelcoj can you show me how you are doing it? if it is possible. Thanks

elalemanyo avatar Feb 27 '23 15:02 elalemanyo

@elalemanyo Would only be useful if you use the same framework, right? In essence listen for the change event on the input field, when certain character threshold is met (eg. min. 3 characters), send async post request to get the search results, than merge this result into the data structure needed for ninja-keys.

eelcoj avatar Feb 28 '23 06:02 eelcoj

is there a way to make api requests and get data and show them in Ninja keys command palette?

Yes, but it's not exactly designed for that. There are better tools for the job.

Here's how you'd do it with NinjaKeys:

ninja.addEventListener('change', (event) => {
  debouncedSearch(event.detail.search);  // define your debounced search function
})

One problem with this is that Ninja filters the data array for titles that match the search queries. For keyword searches this is fine, but if you run a semantic search and your result doesn't echo the query (e.g. search for "excursion" and find "trip") then Ninja won't show the result!

One library that displays exactly a search modal is search-modal. Needs some love but does the job more cleanly. You just need to supply the search URL.

dandv avatar Apr 21 '23 21:04 dandv

One problem with this is that Ninja filters the data array

Could you get around that by adding the search query as keyword in data array for all search results so that it always matches?

olivercoad avatar Apr 08 '24 03:04 olivercoad