Long inline <select> elements are memory drains

Users will have to select from a long list of items in many forms. The simplest and quickest way of doing this is with a select of all the options. This implementation will be sufficient for a long while. Even if you have a couple of thousand choices, it will still work fine. Eventually, however, random pages will get slower. And the common factor will be that those pages have a select dropdown that has thousands of choices.

Products are the first select where this becomes an issue. But categories, buyers and suppliers will soon follow.

So make a flexible asynchronous structure

Instead, implement a flexible endpoint that you can use to populate selects asynchronously.

It’s simply an endpoint that accepts a model name and a query.

It returns a list of entries for that model that match the query.

The query should be at least three characters.

The AJAX call should be debounced.

You should also query more than just the name or title. For instance, for users, the query should check the name as well as the email.

The result is a significant performance improvement and not having to think of this for a long while.