How to make DotNetBlogEngine search box to work with AJAX AutoCompleteExtender control

Earlier today I was thinking: um.. It would be good to have AJAX auto complete on search box of my blog.

It only takes you about 10mins to do this (Thanks to ASP.NET AJAX Control Toolkit).

There are many articles/posts about how to use AutoCompleteExtender control from ASP.NET AJAX Control Toolkit already. So I will focus on how to make it work with DotNetBlogEngine default searchbox

Step 1.

Because AutoCompleteExtender will not work with current HTML textbox comes with default searchbox. We have to change it to ASP.NET Textbox control.

private void BuildHtml()
      StringBuilder sb = new StringBuilder();
      sb.AppendLine("<div id=\"searchbox\">");
      sb.Append("<label for=\"searchfield\" style=\"display:none\">Search</label>");
      sb.AppendFormat("<input type=\"text\" value=\"{0}\" id=\"searchfield\" onkeypress=\"if(event.keyCode==13) return Search('{1}')\" onfocus=\"SearchClear('{2}')\"    onblur=\"SearchClear('{2}')\" />", BlogSettings.Instance.SearchDefaultText, Utils.RelativeWebRoot, BlogSettings.Instance.SearchDefaultText);
      /* ------------------------------------ code omitted ------------------------------------  */
      _Html = sb.ToString();


we remove above hard coded HTML textbox control from the method and then override CreateChildControls() to create new ASP.NET textbox control - we also preserved all the settings from default html textbox control.

protected override void CreateChildControls()
    TextBox newSearchBox = new TextBox();
    newSearchBox.ID = "searchfield";
    newSearchBox.Attributes["value"] = string.Format("{0}", BlogSettings.Instance.SearchDefaultText);
    newSearchBox.Attributes["onkeypress"] = string.Format("if(event.keyCode==13) return Search('{0}')", Utils.RelativeWebRoot);
    newSearchBox.Attributes["onfocus"] = string.Format("SearchClear('{0}')", BlogSettings.Instance.SearchDefaultText);
    newSearchBox.Attributes["onblur"] = string.Format("SearchClear('{0}')", BlogSettings.Instance.SearchDefaultText);

In RenderControl(), we make sure new textbox control will get rendered within default <div>. So we are not breaking the look and feels.

public override void RenderControl(HtmlTextWriter writer)
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("<div id=\"searchbox\">"); //default div tag moved to here
        sb.Append("<label for=\"searchfield\" style=\"display:none\">Search</label>"); //default label tag moved to here
        this.Controls[0].RenderControl(writer); //render new textbox control

Now you have ASP.NET textbox control for your search box. But still few minor tweaks need to be done.

Step 2.

Fix up JavaScript and Styles.

Because in blog.js there are some places hard coded "searchfield" for the lookup ID of the control. It will now throw an errors with new textbox control for its "onblur","onfocus" and other events, because the actual ID of the control is now generated by server.

/* blog.js */

function SearchClear(defaultText)
  var input = $("searchfield"); //this will throw null exception
  if (input.value == defaultText)
    input.value = "";
  else if (input.value == "")
    input.value = defaultText;

Change above method to following

function SearchClear(defaultText, clientId)
  var input = $(clientId);
  if (input.value == defaultText)
    input.value = "";
  else if (input.value == "")
    input.value = defaultText;

And then change the properties of ASP.NET textbox control to pass extra control ClientID as parameter.

newSearchBox.Attributes["onfocus"] = string.Format("SearchClear('{0}','{1}')", BlogSettings.Instance.SearchDefaultText, this.Controls[0].ClientID);

In the style.css file it also has hardcoded "searchfield" style, you might want to change this too.

#searchbox #searchfield {
    width: 200px;

Step 3.

Drag AutoCompleteExtender from toolbox to SidePanel.ascx and point TargetControlID to "searchfield" then you are Done!


Extra: If you are looking for using AJAX AutoCompleteExtender without web service! check out

ASP.NET Ajax Beta: AutoCompleteBehavior without a Web Service

Note: I haven't put this AJAX AutoComplete control up to this site yet. Because there aren't much to search for anyway. But I will definitely use it in later.

blog comments powered by Disqus