0

Firstly i hope im in the right place to ask this question.

I am building a web page that allows the user to select one image from a set of a 100+. i want to display them 6 at a time and the user must be able to search trough them (preferable key up search).

My first implementation queried the Database and returned the first 8 and further sets of 8 were loaded when the user clicked load more. The problem is when the user searches it only searched the images the user already loaded.

My current implementation involved loading all the images and using a css/ js combination to hide all but the first 8 and further sets of 8 are un-hidden when load more is called. but this has a noticeable effect on page load time.

I worry that querying the database every time the user types or removes a character from the input would be creating excessive traffic from the database.

What is the most efficient way to allow users to load more images and search the entire set?

1

I worry that querying the database every time the user types or removes a character from the input would be creating excessive traffic from the database.

You can limit the traffic to your database by only sending request to the backend after the user has stopped typing for a period of time (e.g. 1 second) and only after the user has typed a minimum number of characters. I believe it's the best design to query the database directly from the user input. It's not scalable to load the entire set of images. If you have an index on your search field in the database these lookups should be quite inexpensive. If you're doing a full-text search form user input I would suggest having an explicit "search" button to prevent overwhelming your full-text search engine.

If you use a pre-built JavaScript component, it'll probably have configuration for this delay and character limit. For example, this jQuery autocomplete input field has deferRequestBy and minChars to control how often requests are sent while the user is typing.

Regarding loading more results, you can either have a button like you've done in your first implementation, or use an infinite scroll system. Either way, your database requests should have a limit and offset on them so that you aren't selecting all the data each time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.