How to improve the HTML < SELECT > element and address scalability

July 06, 2018
3 min read
How to improve the HTML SELECT element and address scalability
Introduction

The problem I am going to describe in this article is (in my opinion) a cute little one and the solution is even cuter (hopefully). Basically, we were working on a healthcare-related web application written in ASP.NET MVC and we had a pure and simple HTML select/dropdown from which you could have selected a patient. Now for a small hospital/clinic with under one hundred patients, the standard HTML select would probably do just fine but as the application scales and we get a large number of options/elements in the dropdown this will eventually become a problem.

We got to the point where we had over ten thousand patients and the dropdown was very slow and even crashed at the slightest mouse click. It was simply unusable at that point. After a little reflection on the issue, I thought to myself (and probably most of you would think the same) that a reasonable solution would be to have an HTML select with a smaller number of options and the possibility to do AJAX filtering as the user types in some letters or numbers or what have you. This means that the select would need to be enhanced with the option/feature of entering text because the standard one does not have such an option and fortunately, there are a couple of jQuery plugins/libraries that address this kind of issue.

Solution

Welcome to Select2! Select2 is a jQuery plugin that enhances the standard HTML select with the typing option and the AJAX feature. You can find more information about this library at https://select2.org/ and now a brief illustration of how I used Select2 in the application mentioned above.

In the View you will have the javascript code kind of like this:

<script>
$(document).ready(function () {                       
	$("#patient").select2({
		ajax: {
			url: "@Url.Action("Results", "Patients")",
			dataType: "json",                
			data: function (params) {
				return {
					q: params.term, // search term
					page: params.page
				};
			},
			
			processResults: function (data, params) {                                        
				params.page = params.page || 1;

				return {
					results: data.items,
					pagination: {
						more: (params.page * 30) < data.total_count
					}
				};
			},
			
			cache: true
		}
	});
});
</script>

And in your controller you will have something like this:


public JsonResult Results(string q) { var data = new { items = patientService.FindPatientsStartingWith(q).Select(x =>
new { id = x.Id, text = x.Fullname }) }; return Json(data, JsonRequestBehavior.AllowGet); }
Conclusion

I am no Javascript expert by any means but I would like to throw in my two cents and say that jQuery along with its pretty decent range of plugins is still a viable solution in some cases even with the rise of popular javascript libraries like React, javascript frameworks like Angular, Vue.js or what have you and it usually is pretty straightforward to use either separately or perhaps in conjunction (though this is questionable) with the ones mentioned.

You can also check some of my previous articles:

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

1. What is ASSIST Software's development process?  

The Software Development Life Cycle (SDLC) we employ defines the following stages for a software project. Our SDLC phases include planning, requirement gathering, product design, development, testing, deployment, and maintenance.

2. What software development methodology does ASSIST Software use?  

ASSIST Software primarily leverages Agile principles for flexibility and adaptability. This means we break down projects into smaller, manageable sprints, allowing continuous feedback and iteration throughout the development cycle. We also incorporate elements from other methodologies to increase efficiency as needed. For example, we use Scrum for project roles and collaboration, and Kanban boards to see workflow and manage tasks. As per the Waterfall approach, we emphasize precise planning and documentation during the initial stages.

3. I'm considering a custom application. Should I focus on a desktop, mobile or web app?  

We can offer software consultancy services to determine the type of software you need based on your specific requirements. Please explore what type of app development would suit your custom build product.   

  • A web application runs on a web browser and is accessible from any device with an internet connection. (e.g., online store, social media platform)   
  • Mobile app developers design applications mainly for smartphones and tablets, such as games and productivity tools. However, they can be extended to other devices, such as smartwatches.    
  • Desktop applications are installed directly on a computer (e.g., photo editing software, word processors).   
  • Enterprise software manages complex business functions within an organization (e.g., Customer Relationship Management (CRM), Enterprise Resource Planning (ERP)).

4. My software product is complex. Are you familiar with the Scaled Agile methodology?

We have been in the software engineering industry for 30 years. During this time, we have worked on bespoke software that needed creative thinking, innovation, and customized solutions. 

Scaled Agile refers to frameworks and practices that help large organizations adopt Agile methodologies. Traditional Agile is designed for small, self-organizing teams. Scaled Agile addresses the challenges of implementing Agile across multiple teams working on complex projects.  

SAFe provides a structured approach for aligning teams, coordinating work, and delivering value at scale. It focuses on collaboration, communication, and continuous delivery for optimal custom software development services. 

5. How do I choose the best collaboration model with ASSIST Software?  

We offer flexible models. Think about your project and see which models would be right for you.   

  • Dedicated Team: Ideal for complex, long-term projects requiring high continuity and collaboration.   
  • Team Augmentation: Perfect for short-term projects or existing teams needing additional expertise.   
  • Project-Based Model: Best for well-defined projects with clear deliverables and a fixed budget.   

Contact us to discuss the advantages and disadvantages of each model. 

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2025 ASSIST Software. All rights reserved. Designed with love.