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?