Facebook style auto-complete textbox in ASP.net

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.

ComposeMessage

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 DevThought.com.

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.

ASP.net implementation

I’m working in ASP.net with C# and the demo provided by DevThought.com was PHP only. Since I have a past of PHP, I decided to quickly take a look at their demo and create a ASP.net 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 ASP.net Demo

Comments

Unknown said…
Hi, the link seems to be broken.
February 3, 2010 at 4:13 PM
Anonymous said…
Hi, your implementation is very good, thanks for it.. But you should check this control (fully customizable auto complete control for ASP.NET):

http://www.simp.lified.com/ControlDemo.aspx
March 26, 2010 at 1:23 PM
eks said…
hey thanks a lot for the project. that's very helpful for me.
but I was wondering whether you can implement this by jQuery also. since I'm a newbie, I cannot do it myself.
April 4, 2010 at 2:35 PM
Selçuk Yazar said…
Hi,
How can we add new items in this text box ? for example new friend . I mean i wannt dynamically adding new items on list

thanks in advance

Selçuk
October 11, 2010 at 7:07 PM
Anonymous said…
great work. But when we add this to a content page it is not working. Anything that we need to change?
January 9, 2011 at 7:39 AM
Genbox said…
When you add it to a content page, the ID of the textbox is no longer "form_tags_input".

One layer down (inside one content page) it will be "ctl00_ContentPlaceHolder1_form_tags_input". A concatenation of the content placeholder ID and the textbox ID.
January 10, 2011 at 6:21 AM
Anonymous said…
thanks Genbox. I referred it as
var txtform_tags_input = '<%= form_tags_input.ClientID %>';

& it worked.

I have one more problem now. In the project it is all working fine. But when I publish it, text box is not listing anything. It just displays 'Please wait..'.
Can you suggest anything?
January 15, 2011 at 2:51 PM
Genbox said…
I sounds like it can't reach the web service. You should try debugging with some web tools for your browser. I use Web Developer Toolbar and Firebug.
Take a look here for more tools for Firefox: http://amiworks.co.in/talk/11-best-web-developer-tools-for-firefox-and-internet-explorer/

- Ian Qvist
January 15, 2011 at 5:33 PM
Anonymous said…
Thanks for the reply. Not able to figure out what is reason. If the project is of type website, it works when it is published. But when it is project it doesn't work when it is published. My application is of type project. Any idea?
January 15, 2011 at 7:28 PM
Anonymous said…
Hi Ian,

Can you please help me. I am not able to figure out why after publishing the web application, the text box is not listing. Basically, GetNameJson.aspx page is not loading when we start typing. Before publish, it all works fine.

Thanks in advance
January 16, 2011 at 6:47 PM
Genbox said…
I'm not sure why that happens. I've only tested it using web sites. It is concept code, so you might have to do some adjustments in order to use it in web projects or with newer .net versions.
January 16, 2011 at 9:10 PM
Anonymous said…
Thanks. I will check it
January 17, 2011 at 5:37 AM
Nanthakumar.T said…
hi all
try to submit(post) the same form but selected textboxlist value is not showing after submit.
i want to Preserve textboxlist value after postback..
i am using asp.net application..
what can i do?
February 4, 2011 at 8:20 AM
Nanthakumar.T said…
I solved above problem using given smarttextbox concept.


http://wayofspark.com/projects/smarttextbox/
February 4, 2011 at 11:15 AM
Anonymous said…
hi there! great work and it is free. really appreciated it.
one question: why are there 4 parameters within each item of the returned JsonArray?

jsonArray[i] = new string[] { i.ToString(), names[i], null, html };

i didnt get the point to have a null 3rd parm there.
February 14, 2011 at 2:24 PM
Sachin said…
How to restrict to enter one value only which can be either the existing value or new value entered by user
September 19, 2011 at 2:36 AM
sparklets said…
thanks alot ,thats awesome
please can you do it with webservices ? so that we can have it on the fly from database , this for the projects where data is large and connected with db
January 28, 2012 at 9:41 PM
Genbox said…
You can hook it up to any datasource you want. However, you should take a look at this:
https://autocompletecontrol.codeplex.com/
January 28, 2012 at 10:44 PM
Anonymous said…
i was not able to use it with web services
please any help
April 3, 2012 at 7:07 AM
Anonymous said…
hi great work , but when i put same code in my project there is problem. GetNameJson.aspx.cs call multiple times and no result...
So Please help me.
rathin27@hotmail.com
May 18, 2012 at 11:38 AM
Attiqe ur Rehman said…
Hi,

How about if I want to add some values from the list progamatically, and TextBox should only contain unique members.

Thanks,
Attiqe
March 22, 2013 at 6:40 AM

Post a Comment

Popular posts from this blog

.NET Compression Libraries Benchmark

Image
I often find myself needing a compression library in a software development project, and after a few tests with disappointing results I usually fall back to spawning 7Zip as an external process. This time however, the application specification prohibits any data written to disk, which 7Zip needs to do in order to work correctly. I needed to do everything in memory, and so I had to test some of the C# libraries available for compression as well as the different compression algorithms. Here is a full list of the tested libraries: .NET DeflateStream ICSharpCode SharpZip Zlib.NET DotNetZip Managed LZMA LZMA SDK QuickLZ    Compression 101 Before I get to the results of the benchmark, I think it is important to understand the different archive formats and compression algorithms in order to compare the results with other benchmarks/and or tests. Lets get to it! A compression algorithm can be compared to a small machine that takes in some data, do some math on it and...
Read more

Reducing the size of self-contained .NET Core applications

Just for note keeping, I've written down some methods of reducing the size of a .NET Core application. I thought others could use it as well, so here you go. Original Size First off, let's see how much disk space a self-contained 'hello world' application takes up. > dotnet new console > dotnet publish -r win-x86 -c release Size: 53.9 MB -  yuck! Trimming Microsoft has built a tool that finds unused assemblies and removes them from the distribution package. This is much needed since the 'netcoreapp2.0' profile is basically .NET Framework all over again, and it contains a truckload of assemblies our little 'hello world' application don't use. > dotnet new console > dotnet add package Microsoft.Packaging.Tools.Trimming -v 1.1.0-preview1-25818-01 > dotnet publish -r win-x86 -c release /p:TrimUnusedDependencies=true Size: 15.8 MB Much better! Although, we have only removed unused assemblies - what about unused...
Read more

Convex polygon based collision detection

Image
A lot of people have asked me: Why use a convex polygon only engine like Box2D? In this post I will provide some info on why convex polygons is the optimal polygon type to use. What does convex mean? Convex polygons needs to satisfy the following requirements: All internal angles must be below 180 degrees Every line segment between two vertices can be contained fully inside or at the edge the polygon A non-convex polygon is called a concave polygon and it must have an internal angle measuring greater than 180 degrees. As you might have thought about yourself; concave polygons can be quite handy. Convex-only engines can’t represent a simple player polygon like Pac-Man . Why use convex-only? There are really only one big juicy reason: performance Physics engines are able to take quite a few shortcuts and use cheap algorithms to determine the closest vertex, shortest distance and a lot more. An algorithm like Separating Axis Theorem and the Gilbert – Johnson –...
Read more