AutoComplete or Suggest Control for Ajax.NET

I have a new demo at http://munich.schwarz-interactive.de/autocomplete.aspx which will use a textbox and Ajax.NET Professional to search for customer names (1st textbox) and then for the orders of this selected customer (2nd textbox).

There is a big difference to other AutoComplet boxes. You can use any AjaxMethod to do your search. There is an example done with returning DataSets, default would be something like string[] (arrays). The second textbox is using the CustomerID from the first textbox, not the CustomerName. This is also very different to other controls. If you have a look in the source code you will find both controls and how they are rendering the lines.

I didn't test the control in all browsers, IE and Firefox should work.

Would be nice to get some feedback!!  ;)

• Home
• How to use .NET data types on client-side code?
• How to add security to your AjaxMethods?
• How to use the AjaxServerCache attribute?
• How to access the Session collection?
• How to write your own AutoComplete textbox?
• How to create a simple feedback form?
• How to write IJavaScriptConverters?
• Special Examples

AutoComplete Example

Published: 03.06.2006 10:00:00

Michael Schwarz

Ajax.NET comes without any web control, it is designed only for data exchange with the web server. Here you will see how easy it is to implement a AutoComplete feature.

This example will include following features:

• Keyboard support (TAB, ENTER, DOWN, UP, ESC)
• Mouse support (select on value with the mouse, dblclick in textbox to get list)
• ParentControl support (change value if parent control has been changed)
• DataTable built-in support
• MinChars needed support (default is 0)
• WaitAfterInput to prevent high request interval to the server

Please notice that it is only tested on Firefox and Internet Explorer, it may fail on other web browser not because of Ajax.NET.

Try to enter a cusomter name beginning with A. You will see a list of customer names I have stored in SQL Server. Hitting Tab will place your cursor in the order number text box. All order numbers are starting with 0, so try to enter 0. You should see a order number in bold and maybe one character at the end in red. If you use a customer name starting with i.e. M you will get a different order number selection, it will be text only.

Customer:

OrderNumber:

JavaScript Code

To use the example AutoComplete feature you need to add a behaviour to the text box control. After you have included the autocomplete.js you can write this:

<script type="text/javascript" src="scripts/autocomplete.js"></script>
<script type="text/javascript">
function init() {
var x = new MS.Web.AutoCompleteDataTable("searchCustomerID", 10);
x.getDisplay = function(item) {
return (item != null ? item.CustomerName : "");
}
x.getValue = function(item) {
return (item != null ? item.CustomerName.toString().trimRight() : "");
}
x.getData = function() {
Namespcae.Classname.AjaxMethod(this.ele.value, this.count, this.callback.bind(this));
}
}
addEvent(window, "load", init);
</script>

In the example above we are returning a DataTable from the method Namespcae.Classname.AjaxMethod. In getDisplay() we have to return the data that will be displayed in the select control, and getValue() must return the text that will be put in the text box value after selected one item.

C# Source Code

Below you will find the source code used on the server-side Ajax.NET method which will return the list of order numbers for the second text box.

[AjaxPro.AjaxMethod]
public DataTable SearchAdvanced(string orderNumber, int customerID, int count)
{
DataSet ds = new DataSet();
SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["AjaxDemoSqlServer"]);
SqlCommand cmd = new SqlCommand("SELECT TOP " + count + " * FROM Orders " +
"WHERE CustomerID = @CustomerID " +
"AND OrderNumber LIKE @OrderNumber " +
"ORDER BY OrderNumber, PartNumber, JobNumber", conn);
cmd.Parameters.AddWithValue("@CustomerID", customerID);
cmd.Parameters.AddWithValue("@OrderNumber", orderNumber + "%");
try
{
conn.Open();
try
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
}
finally
{
conn.Close();
}
}
catch (Exception)
{
return null;
}
return ds.Tables.Count == 1 ? ds.Tables[0] : null;
}

As you can see it doesn't matter which arguments you want to use for the search. If you want to return a string[] you can simply use the MS.Web.AutoComplete class in JavaScript and only implement the getData() method, that's all.