Hello dear community,
I have about 20,000 database entries in my app, with location data and some additions (about 6 data sets per entry).
Now I would like to implement a simple search function, I have considered the following approaches:
Version 1:
I write the data in my view into a variable (JSON) and pass it to my template (context) - here I write it into a JavaScript variable. I then react to the form input and build my HTML elements with JavaScript with the respective content and play it out to the user.
From my perspective the simplest solution, but I can’t estimate how much the performance is negatively affected if I write the data to a variable with so much data:
let data = JSON.parse(‘{{ data|escapejs }}’)
Variant 2:
When entering at least three letters, I make an AJAX call and look for the matching results in the database - and then use JavaScript to write the HTML elements with the respective content and play it out to the user.
Here I cannot estimate how heavy the load is, insofar as the user makes dozens of entries.
Variant 3:
I create the HTML directly in the template in a loop. I’ve already tried that, but the page is incredibly slow because the DOM is incredibly huge.
Which variant would you choose - are there any better approaches?