Most applications have some sort of search capability built into a site. This makes it convenient to quickly access related content that is being sought for. Sometimes it can be helpful to see what has been searched for in the past, along with how many instances of that search item have been found.

The following markup exists in the master page, a perfect place to put a search textbox.

Listing 6

<asp:TextBox ID="txtSearch" runat="server" />
<ajax:TextBoxWatermarkExtender ID="extSearch" runat="server" 
      TargetControlID="txtSearch"
      WatermarkText="Type to Search" />
<ajax:AutoCompleteExtender ID="extSearch2" runat="server" 
      TargetControlID="txtSearch"
      ServicePath="~/Services/SearchService.asmx" 
      ServiceMethod="GetTopSearchPhrases"
      MinimumPrefixLength="1" CompletionListItemCssClass="AutoCompleteItemStyle" 
      CompletionListHighlightedItemCssClass="AutoCompleteSelectedItemStyle"
      OnClientItemSelected="autoComplete_itemSelected" />
<asp:LinkButton ID="lnkSearch" runat="server" CssClass="SiteLayoutMenuBarItem"
      OnClick="lnkSearch_Click">Search</asp:LinkButton>

There is quite the number of .NET controls for implementing a search. Outside of the textbox that retains search criteria and a linkbutton that triggers the search, the two extenders help add on additional functionality without requiring a custom control. The TextBoxWatermarkExtender helps by providing a message to the user identifying the purpose of the search textbox. The second extender, the AutoCompleteExtender, is a powerful extender that queries the database, looking for existing search results and returning the list.

The AutoCompleteExtender works by using a web service and web method to get the items that match the text that the user has entered. The web service has to conform to a specific signature for this to work, which I will discuss in a moment.

As the user clicks the submit button, whatever is searched for is logged to the database. There are several schemes that can be implemented to track what the user searches for, and create a popularity ranking. The first question you have to ask is shall whatever the user enters be logged or only searches that have results? Should low to high volume results be differentiated?

In this example, whatever the user enters is stored in the database, but more ideally any search text that has actual results should be stored. This could be done whenever loading the search page or search results.

Another question is what is the search querying? Is the search using a full-text index in the database, index server, or some other mechanism? This is important too, though I do not have a solution implemented in this example; I am only focused on storing the user's query.

Let us start with the web service definition. As I mentioned before, a web service used by the AutoCompleteExtender needs to conform to a specific signature, shown below.

Listing 7

[WebMethod]
public string[] GetTopSearchPhrases(string prefixText, int count)
{
  SearchManager manager = SearchManager.GetManager();
  SearchPhraseCollection phraseCollection =
  manager.GetTopSearchPhrases(prefixText, count);
  return (from p in phraseCollection
  select string.Format("{0} ({1} occurrence(s))", p.Phrase,
  p.ResultCount.ToString())).ToArray();
}

The method takes two to three parameters, depending on the configuration. In this example, the method takes the prefixText, which is the characters the user has entered, and the count, the total number of items to limit the search by. The latter value is specified in the body of the AutoCompleteExtender; it is configurable by changing the CompletionSetCount property value.

If the UseContextKey property of that extender is set to true, a third parameter, contextKey, can be added as well. Notice that an array of strings is returned to the caller. This is also required.  Notice the specialized output, which will include items in the format of "Toasters (12 occurrence(s))."

As the user enters keys, the user is prompted with a selection of items as shown in the screenshot below.

Figure 5

These entries can be selected using the mouse, or by clicking the up and down arrow. Selecting an entry places the item in the textbox. These entries are stored in the database using the following code in the search button click event (next to the textbox, but not shown above).

Listing 8

protected void lnkSearch_Click(object sender, EventArgs e)
{
  if (string.IsNullOrEmpty(this.txtSearch.Text))
  return;
  string text = this.txtSearch.Text.Trim();
  if (string.IsNullOrEmpty(text))
  return;
  //Updates the search phrase count.
  SearchManager manager = SearchManager.GetManager();
  manager.UpdateSearchPhraseCount(text);
}

The SearchManager component makes a call to the data layer to perform the update. If the searched text already exists, then the number of occurrences is incremented by one; otherwise, a new entry is created. There is only one problem not yet discussed. Upon selecting an item in the auto complete popup, the text "(X occurrences)" would also be copied to the textbox. This is not very useful, and needs to be stripped out.

The solution to this is to attach to the itemSelected client event. Notice in the AutoCompleteExtender markup above, the OnClientItemSelected references the name of an event handler. This event handler performs the work of stripping out the "(X occurrences)" text from the selected entry. It does this with the following JavaScript.

Listing 9

function autoComplete_itemSelected(sender, e)
{
      var text = e.get_text();
      if (text.indexOf('(') > 0)
      {
            text = text.substring(0, text.indexOf('('));
            if (text != null && text.length > 0)
                  text = text.trimEnd();
      }
      var targetElement = sender.get_element();
      targetElement.value = text;
}

The event argument in this event is AutoCompleteItemEventArgs, which has an item, text, and value property. I am using the text property getter, and parsing it to look for the first parenthesis. If found, it is stripped out and assigned to the target element, and is accessible using the element property getter. Remember that extenders target another property and do not emit its own interface, so an extender's element property references the extended control.

The issue that most people will have with the solution above is that there is not any intellisense to find all this out, and there is not any MSDN documentation. I had to manually dig through the AJAX control toolkit source code to find all of this information.  I would highly recommend looking at the source code whenever using these extenders.