YUI AutoComplete + Anthem = AutoSearch

Anthem.NET is an Ajax library for ASP.NET applications. AutoComplete is part of the Yahoo User Interface library for creating sophisticated DHTML and Ajax applications. What happens if you mash them together? How about YuiAutoComplete?

YuiAutoComplete is an ASP.NET server control that generates the HTML and javascript necessary to create a YUI AutoComplete control. This short article describes how I used YuiAutoComplete to create an auto search widget for an ecommerce site. As the customer starts typing in the box YuiAutoComplete will display matching products. If the customer selects one of the products from the list, YuiAutoComplete will redirect the browser to the product detail page.

First I added the Anthem and AnthemExtensions assemblies to my web site. Anthem and AnthemExtensions are the two assemblies that you get when you build Anthem.NET solution.

Then I created a user control to encapsulate the widget.

<div class="container">
    <asp:TextBox ID="AutoSearchField" runat="server" CssClass="textbox" />
    <AnthemExtensions:YuiAutoComplete id="AutoSearchWidget" runat="server" 
        AutoCallBack="true"
        CssClass="results" 
        FormatResult="formatResult" 
        OnSearch="AutoSearch_Search" 
        OnSelectedItemChanged="AutoSearch_SelectedItemChanged"
        TextBox="AutoSearchField">
    </AnthemExtensions:YuiAutoComplete>
</div>

Next I wrote 3 functions: formatResult, AutoSearch_Search, and AutoSearch_SelectedItemChanged.

YUI AutoComplete will use the OnSearch event handler on the server to retrieve search results. The actual call is made using an Anthem callback. In this example AutoSearch_Search performs a catalog search for the search term and returns the SKU, Product Name, and product detail page URL.

    [Anthem.Method]
    public string[][] AutoSearch_Search(string query)
    {
        ProductSearchCriteria criteria = new ProductSearchCriteria();
        criteria.Keyword = query;

        Collection<ProductSearchResultGroup> groups = InternalProduct.SearchByComplexPhrase(criteria,
            SessionManager.GetCurrentUserId(), false, this.AutoSearchWidget.MaxResultsDisplayed);

        ArrayList result = new ArrayList();
        if (groups.Count > 0)
        {
            foreach (ProductSearchResultGroup group in groups)
            {
                foreach (Product product in group.Products)
                {
                    string url = BVSoftware.Bvc5.Core.Utilities.UrlRewriter.BuildUrlForProduct(product, 
                        Request);
                    result.Add(new string[] { product.Sku, product.ProductName, url });
                }
            }
        }

        return (string[][])result.ToArray(typeof(string[]));
    }

YUI AutoComplete will use the client side FormatResult function to format the search results. In this example formatResult displays the SKU and Product Name in the search results list. Note that even though I don't show the product URL, YUI AutoComplete keep track of it.

    function formatResult(item, query) {
        return item[0] + ' (' + item[1] + ')';
    }

AutoSearch_SelectedItemChanged is another server side method that is called (via Anthem callback) when the customer selects one of the results. In this example the method redirects the browser to the product detail page URL.

    protected void AutoSearch_SelectedItemChanged(object sender, EventArgs e)
    {
        string url = this.AutoSearchWidget.SelectedItem.Split(',')[2];
        Response.Redirect(url);
    }

Source: AutoSearch.zip

This site looks much better in a browser that supports current web standards, but it is accessible to any browser. Download one now