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:

1. https://assist-software.net/blog/dependency-injection-aspnet-mvc-tutorial
2. https://assist-software.net/snippets/model-binding-aspnet-mvc
3. https://assist-software.net/snippets/how-get-path-windows-special-folders-windows-service-net