Sunday, December 20, 2009

Facebook style auto-complete textbox in

You might have seen the crispy AJAX enabled auto-complete list when entering friends into a textbox. I was especially intrigued by the “Compose Message – To:” textbox. You enter a part of a name and almost instantly a list of names popup. Adding a name is as simple as selecting it from the list and it gets added to the textbox.


I started to identify the different parts of this functionality:

  • Labels inside textbox
  • Auto-completion on entering text
  • Growable textbox size
  • Highlighting of results
  • Close button on labels
  • Many more…

It looked like a daunting task, so I decided to search for an already made solution instead of making one myself. I came across an Ajax Control Toolkit issue that requested this functionality and even a jQuery plugin mentioned on Stack Overflow. Seemed like a lot of people mentioned this functionality, but nothing really appealed to me until I found TextboxList on

It immediately caught my attention since it had a working demo that was exactly what I wanted. The greatest thing about TextboxList is that it is simple and very extensible, so I started my journey to create a To: field like the one from Facebook. implementation

I’m working in with C# and the demo provided by was PHP only. Since I have a past of PHP, I decided to quickly take a look at their demo and create a clone.

The only thing I did was to convert the auto-completion to C#. Everything else has just been taken from the original demo and fitted into a simple web site project. You can download the source code here:

Download TextboxList Demo