Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Brian T. Jackett AJAX, SharePoint

<Foreword>For those looking for help integrating the AJAXControlToolkit with SharePoint check out this post: Integrating ASP.NET AJAX with SharePoint</Foreword>

I’ve never been one to use JavaScript that much in my web development, partially because I haven’t had much training with it and partially because I usually work on heavy server side web applications.  My current work project was well suited for some of the AJAXControlToolkit controls so I’ve been trying out other controls in the toolkit to see what uses they may have.  Last week I ran into a difficult client request that I didn’t have an efficient solution for in my first few passes.  Here’s the back story.

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.

AutoCompleteExtender3

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[3].Controls.Add(txt);





table.Rows[rowNum].Cells[3].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...";




table.Rows[rowNum].Cells[3].Controls.Add(twe);








// 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;




table.Rows[rowNum].Cells[3].Controls.Add(ace);








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)]




[System.Web.Script.Services.ScriptService]




public class AutoCompleteService : System.Web.Services.WebService




{




    static string _connectionstring = null;




    static DataTable dt = null;








    public AutoCompleteService()




    {








    }








    [System.Web.Services.WebMethod]




    [System.Web.Script.Services.ScriptMethod]




    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++)




        {




            results.Add(rows[i]["FormattedDescription"].ToString());




        }








        return results.ToArray();




    }




}








Be sure to include the “[System.Web.Script.Services.ScriptService]” attribute for the web service and the “[System.Web.Script.Services.ScriptMethod]” on the web method as they are not typical inclusions (thanks to this post for leading me in the right direction).  Essentially what they do is allow for the AJAX (any JavaScript really) to call this web service and web method.  Without them you will get something like a giant list of “undefined” values returned.  Now we simply need to publish this web service to a location that SharePoint can reach.  I chose the “/_layouts/” folder for convenience sake.  You could easily publish it to a different location or server that you have access to if needed.


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.


AutoCompleteExtender1


AutoCompleteExtender2


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.


-Frog Out

			


	

			



			


				
	
			



	
			

			

				13 thoughts on “Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint”			


			
			
    
						
  1. 
			
		
    2. 
		
  2. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#478617Murary,  Thanks for the feedback.  Unfortunately no I haven’t worked with the DelimiterCharacters property yet.  If you go to this site http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx there is a sample of the control being used.  Looks like the DelimiterCharacters property allows you to return one long string to return from your webservice which is then parsed based on any of the delimiter characters you choose, ex. “:;, “.  Hope that helps you out.   Brian
    

    Like
    
				
    

				
    Reply
    			
    
		
    3. 
		
  3. 
			
		
    4. 
		
  4. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#484354Graham,   I have not tried to deploy a custom web service to the SharePoint _vti_bin folder but I don’t know of any reasons it shouldn’t work.  Check out the below 2 articles and see if they help with solving the issue.  Let me know if you find a solution.  Thanks for reading.http://msdn.microsoft.com/en-us/library/dd583131(office.11).aspxhttp://www.jamestsai.net/Blog/post/Where-do-you-deploy-custom-SharePoint-web-service-files-to-(asmx-discoaspx-and-wsdlaspx).aspx
    

    Like
    
				
    

				
    Reply
    			
    
		
    5. 
		
  5. 
			
		
    6. 
		
  6. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#486409Akshay,   I use WSPBuilder extensions in Visual Studio for developing my WSPs.  When you create a SharePoint project WSPBuilder will create the “12 Hive” folder structure in your project.  All you need to do is place your ASMX file under 12/Template/Layouts.  During deployment your WSP should place that file into the corresponding folder on your servers for consumption.   Alternately you could develop your web service ASMX in a completely separate solution/project and hand copy it to the folder.  I wouldn’t recommend this as it involves deployment not using a WSP.   One other note to keep in mind.  By deploying a web service to the /_layouts/ folder, any site may call the web service.  This means that whatever URL you specify when calling it (ex. http://<server>/_layouts/myWebService.asmx or http://<server>/sites/HR/_layouts/myWebService.asmx) the account calling the web service must have proper access to that site (I believe contributor rights, but don’t quote me on that).   I hope this helps.  Let me know if you have further questions.
    

    Like
    
				
    

				
    Reply
    			
    
		
    7. 
		
  7. 
			
		
    8. 
		
  8. 
			
		
    9. 
		
  9. 
			
		
    10. 
		
  10. 
			
		
    11. 
		
  11. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#585819Thnks for the respons brian,Actually i’m using smart part to include my user Control .ascx as webparts. I ve created the Web service et attached to the Autocomplete extender and got no compilation errors. but whene i try my web part i got nothing suggested. Isuspected that the service is not integrated bu when i access it via it’s url it’s there.??Any idea ???
    

    Like
    
				
    

				
    Reply
    			
    
		
    12. 
		
  12. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#586391Aloui,On your web service method did you make sure to include the attributes [System.Web.Services.WebMethod] and [System.Web.Script.Services.ScriptMethod].  The second is one I hadn’t used before but let’s you call the method using an AJAX call rather than explicit web request (or so I read).Also have you used a network monitoring tool (such as Fiddler) to find out if the calls are actually being made to your web service?
    

    Like
    
				
    

				
    Reply
    			
    
		
    13. 
		
  13. 
			
    
				

				
    
					
    Originally posted on: https://briantjackett.com/archive/2009/06/25/implementing-the-ajaxcontroltoolkit-autocompleteextender-inside-sharepoint.aspx#604599This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy.  I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url…….http://mindstick.com/Articles/a7e242ef-fd21-4d4a-8cc6-ccbf4972be65/?Ajax%20Toolkit%20AutoCompleteExtender%20Control%20in%20Asp.NetThanks
    

    Like
    
				
    

				
    Reply
    			
    
		
    14. 
			


					


	
	
		

		
Leave a comment