ASP.NET Suggester

Introduction

Implementing an auto-complete control is never an easy task. I've spent some time to find already existing solutions for this, but couldn't find anything. Some solutions do not provide all the functionality I need, others have no support for the fantastic IE 6 browser. As a final step - a new control was created :)

Here is a live demo if you want to see it in action.

Features

  • Supports all modern browsers including IE 6.
  • Works with WCF/WebService to load data.
  • Each entered item is represented by a special element. The user can navigate between them with mouse or keyboard. The user can delete items with the 'del' and 'backspace' buttons.
  • If the user types text that cannot be auto-completed (have no matches), the text can be added as an Unresolved Item - the user just needs to press 'Enter'. If the user chooses a suggested item from the dropdown, this item will be added as the Resolved Item. In summary - unresolved items have no ID but resolved ones have.
  • Possibility to decorate suggested items on the server (WebService) side or client side.
  • Watermark support.
  • Control over WebService call. Suggester starts to load items only if the user enters more than two letters (this is by default, but you can change it).
  • Control over maximum items allowed to enter.
  • Unresolved items support may be turned off.

Check the full server side and client side members description. Here is the CodePlex page for this project.

Using the code

You can download the demo project to check how easy it is to use this ASP.NET Suggester.

Step 1

Since this controls uses the ASP.NET AJAX framework, the page should have a ScriptManager:

<form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
        ...

Step 2

Add all the required CSS filers and scripts to the page. Since the control uses jQuery, we need to add it. Also, for the demo, the jQuery UI theme is used, so we need it too:

<head runat="server">
    <title></title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/excite-bike/jquery-ui-1.8.13.custom.css" 
          rel="stylesheet" type="text/css" />
    <link href="css/Suggester.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>

Step 3

We will see how to define Suggester on the page. This is for the control registration:

<%@ Register Assembly="SugesterDemo" Namespace="Suggest" TagPrefix="ctl" %>

Suggester itself:

<ctl:Suggester ID="suggester" runat="server" 
    Width="500"

    Watermark="Enter some smart word here..."
    AllowUnresolvedItems="true"
    AllowedMaxItems="3"

    RootCSSClass="suggester"
    ItemCSSClass="ui-corner-all"

    AjaxPath="/SuggesterData.asmx"
    AjaxMethod="GetData"
    ScriptPath="/js/Suggester.js"
    OnClientBeginRequest="onBeginRequest"
    />

The most important fields here are:

  • RootCSSClass - Required to apply styling. You can develop multiple styles for Suggester - each with its own root CSS class.
  • AjaxPath - Path to the WCF/WebService.
  • AjaxMethod - Method that will be called in WCF/WebService to get the suggested items.
  • ScriptPath - Path to the Suggester client side script that will be registered when the control will render on the page.
  • OnClientBeginRequest - Client JS function that will be called to create the Request object that will be sent to the server (see Step 4).

Step 4

Define the client function that creates the JSON request object that will be passed to WCF/WebService:

<script language="javascript" type="text/javascript">
    function onBeginRequest(s, e)
    {
        e.parameters =
                {
                    "request": { "Prefix": s.get_text(), "StartsWith": false }
                };
    }
</script>

Step 5

Here is the WebService that will handle the Suggester's requests. We need to create SuggesterData.asmx and put the following code inside. As you can see, it is a service that returns fake data - but this is enough for this sample. Here is the code-behind of the WebService:

namespace SugesterDemo
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class SuggesterData : WebService
    {

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<ws.Item> GetData(Request request)
        {
            var result = new List<ws.Item>();
            for(int i = 0; i < 100; i++)
            {
                string text = request.Prefix + " text";
                var item = new ws.Item {Id = i.ToString(), 
                               Text = text, Desc = "This is " + text};
                item.Html = string.Format("<b>{0}</b> text", request.Prefix);
                result.Add(item);
            }
            return result;
        }
    }

    public class Request
    {
        public string Prefix { get; set; }
        public bool StartsWith { get; set; }
    }
}

That's it!

I hope you will find this useful.

关键字 asp.net suggester,auto,complete control
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架