(Originally coded in VS2008 using c#, .net framework 3.5, compatibility with VS2005/.net 2.0 unknown)

In this post, we’re going to look at modifying the AjaxControlToolkit to allow you to format the displayed items in an AutoCompleteExtender dropdown with html.

I first found out about this from Rob White, aka ILIVEWITHIAN on The Old Sewing Factory.  Credit goes to him, this is just an example of how I did it in C#.

As discussed, you need to get the source for the toolkit here.  Make sure you get the source and not just the precompiled dll, we’re going to be extending it.

The first change will be adding the following method overload to your AutoCompleteExtender.cs file:

public static string CreateAutoCompleteItem _
                        (string text, string value, string markup)
{
      return new JavaScriptSerializer().Serialize _
                                    (new Pair(text, new Pair(value, markup)));
}

For the sake of keeping this simple, I won’t post the whole function that goes in AutoCompleteBehavior.js, but you can read about it at Rob’s blog, or go here to download the file (link taken from Rob White at The Old Sewing Factory).

Once you’ve got the toolkit extended, the fun begins.  In this example, our bus line company wants to add/edit passengers.  Because employees of the bus line are already in our personnel database, we don’t want to duplicate information in our passengers table.  All the same, we don’t want just anyone to be able to edit employee personnel records.  At first, it makes sense to just exclude employees in our web service, but then how would a user know if the person they’re typing in already exists?  The answer: format employees in the dropdown!  We’ll be showing all employees in red, and regular passengers/customers in black.

We’ll start by querying our entity set just like in the previous post on this topic:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetPassengerList(string prefixText, int count)
{
/**********************************************************
* Takes a prefix string from a textbox and retrieves
* passengers from the entitySet. Used by the AJAX Toolkit
* AutoCompleteExtender.
***********************************************************/

    List<string> Passengers = new List<string>();
    //query the passenger entity:
    using (BusLineEntities myEnts = new BusLineEntities())
    {
      IQueryable<Passenger> passengersQuery =
              from p in myEnts.Passengers
                    where p.DisplayName.Contains(prefixText)
                    orderby p.LastName
                    select p;
      string theHTML; //this will be what the user sees

      //add the values to the list and include id
      foreach (Passenger p in passengersQuery) {
         if(p.IsEmployee == false) { //person is an external customer
              Passengers.Add(AjaxControlToolkit.AutoCompleteExtender. _
                CreateAutoCompleteItem(p.DisplayName, p.Id.ToString()));
                 }
         else { //person is an employee, display in red
             theHTML = "<span style='color: red;'>" + p.DisplayName + "</span>";
             Passengers.Add(AjaxControlToolkit.AutoCompleteExtender. _
               CreateAutoCompleteItem(p.DisplayName, p.Id.ToString(), theHTML));
                }
         }
   }
return Passengers.ToArray();
}//end GetPassengerList

When it’s all done, you’ll get output like this:

If you really want to get fancy, you can do something like Rob did and display the employee’s photo, an icon, etc., the possibilities are endless. I found this simple span to display employees in red was exactly what my client needed to see if the person they were typing in existed in *one* of their tables, while being able to distinguish between external and internal customers.

Next up, if the name they typed in wasn’t in the list, we’ll give them a one-click insert. Also, allowing user to select an employee (red) to view their info, but disable edit, is a trivial bit of code on top of this.