<Foreword>For those looking for help integrating the AJAXControlToolkit with SharePoint check out this post: Integrating ASP.NET AJAX with SharePoint</Foreword>
The client has 500+ stores that they operate and part of the web application I’m designing sends messages between those stores. The user will select various criteria for which stores are included: zone, district, state, etc. One of the selections happens to be a custom store group code. The number of store group codes currently used is well above 8000. Obviously making the end user scroll through a list of 8000+ options is not ideal. After attempting to implement a quick proof of concept of how bad performance was the web page chugged after every action. The page size alone was over 1 MB and response time was going on 15-30 seconds or more. What I wanted to present was something akin to a search engine (http://www.bing.com as an example) suggestion box that gives the user suggestions as they type.
With this type of solution I could have the user filter the available options to less than 600 with just 1 letter entered and less than 50 with 2 letters entered. Not only would this be more manageable to search through, but it would also save posting all of that extraneous data into the web page file thereby reducing the page size considerably. Eventually I ran across the AutoCompleteExtender from the AJAXControlToolkit. The way this control extender works is that you wire up a target control (textbox) and a web service that you will call into to get your results. Below is part of the code needed to get this working. I included a TextBoxWatermarkExtender as well to give a hint to the user.
TextBox txt = new TextBox();
txt.ID = "txtStoreGroupList";
txt.Width = Unit.Percentage(100);
table.Rows[rowNum].Cells.Controls.Add(new LiteralControl("Type at least 2 characters of store group code"));
// watermark extender gives directions on adding store groups
AjaxControlToolkit.TextBoxWatermarkExtender twe = new AjaxControlToolkit.TextBoxWatermarkExtender();
twe.ID = "tweStoreGroupList";
twe.TargetControlID = "txtStoreGroupList";
twe.WatermarkText = "Begin typing store group code...";
// autocomplete extender enables lookup of store groups without loading all 8000+ onto page
AjaxControlToolkit.AutoCompleteExtender ace = new AjaxControlToolkit.AutoCompleteExtender();
ace.ID = "aceStoreGroupList";
ace.ServiceMethod = "GetStoreGroupCompletionList";
ace.ServicePath = "/_layouts/autocompleteservice.asmx";
ace.TargetControlID = "txtStoreGroupList";
ace.MinimumPrefixLength = 2;
ace.CompletionSetCount = 50;
ace.CompletionInterval = 300;
ace.EnableCaching = true;
Looking at the implementation of the AutoCompleteExtender I require a “MinimumPrefixLength” of 2 and a “CompletionSetCount” of 50 so that the result set is manageable. I have created a Web Service “autocompleteservice.asmx” with a web method “GetStoreGroupCompletionList” to return my suggestion short list. This required a little bit of trickery to get working, so note the web service and web method decoration attributes.
[WebService(Namespace = "Your namespace goes here")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutoCompleteService : System.Web.Services.WebService
static string _connectionstring = null;
static DataTable dt = null;
public string GetStoreGroupCompletionList(string prefixText, int count)
List<string> results = new List<string>();
// if datatable for store group data is empty, skip this step
if (dt == null )
// CALL INTO DATABASE FOR RESULTS REMOVED
DataRow rows = dt.Select("Group_Code LIKE '" + prefixText + "%'");
for (int i = 0; i < rows.Length && i < count; i++)
What we end up with is a very nice and easy to use textbox with suggestions that improves performance, improves the user experience, and required minimal coding to complete.
As always please leave any feedback if you liked/disliked this example, have suggestions, etc. Feel free to “borrow” my code snippets but please include references to the source material here if you do.