search items that load data from DB in Knockout JS

Question

In my application, I have an observableArray that loads data from DB. This observableArray fills first 25 items from DB and from scrolled down it loads another 25 and it goes on.

Now, I want to implement search, that should display the result searching the whole data from DB and not just from the displayed 25 items.

I tried to get the search result by sending the whole searching text to DB on clicking search button and there is lot of datas in DB which takes much time to load data.

Please let me know how I can get the desired result from DB within ms. Thanks in advance.

Answer 1

To get a well behaving search with Knockout, you should extend your searchText observable that is bound to the input with a rate-limiter

this.searchText = ko.observable('').extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } })

This will call any subscribers after the input has remained unchanged for 500ms (i.e. when the user stops typing). You could also use the default method notifyAtFixedRate to call the API at least once every X seconds.

And to top it off, a fiddle!

Note: with this being said, if your query is taking 40 seconds, that sounds like a problem with your database query. It's possible that it's taking that long because you're flooding the server with requests, but that still seems awfully slow. This is the strategy we use and it works excellent, but our API response time is <200ms.