Share via

Search autocomplete with ASP.NET AJAX Extensions

  • Article

I am working on a rich content app for one of my talks at TechEd Europe and I thought it would be a good idea to implement a search box with an autocomplete of the past search quires. The intuition here is that the changes are someone else has searched for the same thing you are searching for, so past queries is an interesting set of options to offer. Not to mention it is fun to look at what other people are searching for ;-) What I think is cool about this is I was able to implement it with less than 10 lines of code and absolutely no database specific logic. I did this with a combination of the ASP.NET 2.0 profile store and the ASP.NET AJAX AutoCompleteExtender…

Here is an example screenshot and all the code\markup required… I'd love to hear what you think… do you think this makes for a compelling demo?

Html for search box and "submit" link (default.aspx)

<div id="links">
   Search for
   <asp:TextBox ID="searchtext" runat="server" CssClass="searchbox" />&nbsp;
   <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">go</asp:LinkButton><br />
</div>

ASP.NET handler for the LinkButton (default.aspx)

protected void LinkButton1_Click(object sender, EventArgs e)
{
   StringCollection list = Profile.SearchTerms;
   if (!list.Contains(searchtext.Text))
   {
      list.Add(searchtext.Text);
   }
   //TODO: Do search
}

ASP.NET AJAX goodness (default.aspx)

<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" TargetControlID="searchtext"
                          runat="server" ServiceMethod="GetCompletionList"
                          ServicePath="~/SearchAutoComplete.asmx" MinimumPrefixLength="1" />

 

Web Service Implementation (SearchAutoComplete.asmx)

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
   StringCollection list = (StringCollection)HttpContext.Current.Profile["SearchTerms"];
   List<string> suggestions = new List<string>();
   foreach (string s in list)
   {
      if (s.StartsWith(prefixText))
      {
         suggestions.Add(s);
      }
   }
   return suggestions.ToArray();
}

Profile Config Section – (Web.config in <system.web> )

<profile>
   <properties>
      <add name="SearchTerms"
           type="System.Collections.Specialized.StringCollection"
           serializeAs="Xml" />
    </properties>
</profile>

Exercises left for the user

  • Clean up any bad or misleading search terms
  • Sort hits by relevance
  • Add a hit count
  • Age out older results

screenshot.jpg

Comments

  • Anonymous
    October 27, 2006
    Nice and simple example. No hassle with db backends to store and retrieve the searched items, simply use the profile functionality. Looks good.

  • Anonymous
    October 28, 2006
    YES I CREATED SOMETHING LIKE THIS FOR MY SITE http://www.vikramlakhotia.com/Adding_Auto_Suggest_Box_in_the_search_Box.aspx

  • Anonymous
    October 29, 2006
    I thought profile would be user specific - so would this show you what other people have searched for?

  • Anonymous
    October 29, 2006
    The comment has been removed

  • Anonymous
    October 30, 2006
    The article could be good if only the AutoCompleteExtender existed! It seems to have been removed from the standard ASP.NET Ajax suite (it was there with Atlas). Where did it go?!?

  • Anonymous
    October 30, 2006
    One thing I'd like to see addressed is cases where the auto-complete needs additional information displayed in the drop down, but not inserted into the textbox.  For example, Google's autocomplete tells you about how many results to expect.   Another example- I have several apps that allow a free-text search against a database of people.  Users can begin typing a first name, last name, employee Id, and a few other properties.  Ideally it would drop down a full description "1234 - John Doe - Marketing",  but in the end populate the textbox with only "1234".   This could probably be done with the other AJAX controls, but it seems like using a Name/Value pair instead of a StringCollection would be really useful.

  • Anonymous
    October 30, 2006
    Ross D - You are right, this is per user search results today... ikrima - Yes, of course you can call against a database!  Just change the implementation in the GetCompletionList() method to call against the database... Paolo - Sorry, I should have mentioned, AutoCompleteExtender is in the Value-add CTP (http://www.microsoft.com/downloads/details.aspx?FamilyId=8A3FD0DD-D75E-4249-86DA-3D4AAC649652&displaylang=en)    It will be moved to the control toolkit very soon. Daniel - Yes, I have some ideas for how to do that... let me play around with it...

  • Anonymous
    October 30, 2006
    The comment has been removed

  • Anonymous
    October 30, 2006
    Sorry, I should have said, you need to include: using System.Collections.Specialized; see: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemCollectionsSpecializedStringCollectionClassTopic.asp

  • Anonymous
    October 30, 2006
    I too would love to see some more advanced autocomplete usage beyond the basic usage thats been around for some time. Hoping to see that in the demo. Besides the drop/down containing more info like Daniel mentioned, I'd like to be able to populate more than one textbox with the choice. So the server needs to be able to send back more than just strings. I also need to send the server more information than the current text to generate the list of relevant results to show. That would be great to see.

  • Anonymous
    November 02, 2006
    There seems to be a bug in the autocomplete extender if you hit enter in the textbox with the textbox empty, it comes up with a javascript error: _completionListElement.childNodes[...].firstChild is null or not an object.

  • Anonymous
    November 08, 2006
    Brad Abrams からです。 Search autocomplete with ASP.NET AJAX Extensions 少し前の投稿ですが、Brad さんが AJAX Extensions

  • Anonymous
    November 12, 2006
    Celkem pěkný návod na tutu funkčnost: http://blogs.msdn.com/brada/archive/2006/10/27/search-autocomplete-with-asp-net-ajax-extensions.asp

  • Anonymous
    November 17, 2006
    The comment has been removed

  • Anonymous
    November 17, 2006
    hello, Where is AutoCompleteExtender in the Ajax ASP.NET? I have install ASP.NET AJAX Beta 2 an I don't have this ASP.NET AJAX AutoCompleteExtender:( Thank's for answrs damian

  • Anonymous
    November 17, 2006
    Damian -- AutoCompleteExtender is in the "futures CTP" http://ajax.asp.net/default.aspx?tabid=47&subtabid=471

  • Anonymous
    November 18, 2006
    hello, My problem is unbound;-) Here is idea: http://forums.asp.net/thread/1464111.aspx Brad Abrams - thank's for You too.

  • Anonymous
    November 19, 2006
    where is trouble with it... Sys.ArgumentTypeException: Object of type 'Object' cannot be converted to type 'Sys.UI.DomElement'. and I see the same problem on this page now, Brad :( is that only my problem?

  • Anonymous
    November 19, 2006
    oh sorry Brad that`s ok  with your page :/

  • Anonymous
    November 22, 2006
    Here's a extention of autocomplete that lets you do it w/o a webservice, and lets you access page state so the completion items can vary based on other controls: http://weblogs.asp.net/infinitiesloop/archive/2006/11/15/ASP.NET-Ajax-Beta_3A00_-AutoCompleteBehavior-without-a-Web-Service.aspx

  • Anonymous
    November 23, 2006
    The comment has been removed

  • Anonymous
    December 13, 2006
    If that works for you does this mean that the current requirement to mark your service [ScriptService] is being abandoned?

  • Anonymous
    December 13, 2006
    >>There seems to be a bug in the autocomplete >>extender if you hit enter in the textbox with the >>textbox empty, it comes up with a javascript >>error: _completionListElement.childNodes>>[...].firstChild is >>null or not an object. Just put a span in panel u r using to the panel , which is being assigned to "CompletionListElementID" property

  • Anonymous
    December 20, 2006
    i am getting this error :Microsoft JScript runtime error: 'Sys' is undefined any idea

  • Anonymous
    December 28, 2006
    hi vinu, try this: http://forums.asp.net/thread/1459629.aspx

  • Anonymous
    January 09, 2007
    thanx for sharing information .... its relly cool to use autocompleteextender in my project

  • Anonymous
    January 22, 2007
    I have implimented above code but.It does not call the web service method

  • Anonymous
    January 22, 2007
    Is it possible to define the GetCompletionList method NOT as a web service.