Post
Ask Question

Special Character Separated AutoComplete Extender Using ASP.Net

Background
 
Sometimes there is a need for some suggested text when searching for specific text from a huge number of records and search multiple records. This type of requirement can be satisfied using the Ajax Control toolkit Auto Complete extender. So let us implement this requirement step-by-step.

The AutoComplete Extender

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control and will associate that control with a popup panel to display words that begin with the prefix typed into the TextBox.

Properties of AutoComplete extender

  • CompletionInterval
  • CompletionListCssClass
  •  CompletionListElementID
  •  CompletionListHighlightedItemCssClass
  •  CompletionListItemCssClass
  •  CompletionSetCount
  •  ContextKey
  •  DelimiterCharacters 
  • EnableCaching 
  • FirstRowSelected
  •  MinimumPrefixLength
  • OnClientHidden
  • OnClientHiding
  • OnClientItemOut
  • OnClientItemOver
  • OnClientItemSelected
  • OnClientPopulated 
  • OnClientPopulating
  • OnClientShowing
  • OnClientShown 
  • OnHide
  • OnShow
  • ServiceMethod
  • ServicePath
  • ShowOnlyCurrentWordInCompletionListItem
  • UseContextKey

Let us demonstrate the preceding explanation in a practical approach by creating a sample web application.

Step 1: Create a table using the following script:
  1. CREATE TABLE [dbo].[Employee](  
  2.     [id] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [City] [varchar](50) NULL,  
  5.     [Address] [varchar](50) NULL,  
  6.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  7. (  
  8.     [id] ASC  
  9. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  10. ) ON [PRIMARY] 
Insert some records into a table such as follows:
 
 
 
Step 2: Create a web application as in the following:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).

  3. Provide the web site a name such as "CommaSepratedAutocomplete" or another as you wish and specify the location.

  4. Then right-click on Solution Explorer - "Add New Item" - Add Web Form.

  5. Drag and drop one  textBoxes onto the <form> section of the Default.aspx page.

  6. Add AutoCompleteExtender from ToolBox.

  7. Now the default.aspx page source code will look such as follows.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Article by Vithal Wadje</title>  
  8. </head>  
  9. <body bgcolor="silver">  
  10.     <form id="form1" runat="server">  
  11.     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">  
  12.   
  13.     </asp:ScriptManager>  
  14.     <br /><br />  
  15.     <table width="100%">  
  16.         <tr>  
  17.             <td>  
  18.           Name  
  19.             </td>  
  20.             <td>  
  21.                 <asp:TextBox ID="TextBox1" runat="server" Height="47px" Width="317px"></asp:TextBox>  
  22.                 <asp:AutoCompleteExtender  
  23.                  ServiceMethod="GetCompletionList"  
  24.                   MinimumPrefixLength="1"  
  25.                     CompletionInterval="10"  
  26.                      EnableCaching="false"  
  27.                       CompletionSetCount="1"   
  28.                       TargetControlID="TextBox1"  
  29.                     ID="AutoCompleteExtender1"  
  30.                      runat="server"   
  31.                      FirstRowSelected="false"  
  32.                      DelimiterCharacters=","  
  33.                  ShowOnlyCurrentWordInCompletionListItem="true"  
  34.                      >  
  35.                 </asp:AutoCompleteExtender>  
  36.             </td>  
  37.         </tr>  
  38.     </table>  
  39.     </form>  
  40. </body>  
  41. </html> 
Step 4: Write a method in the default.aspx.cs page to bind records from the database as in the following:
 
  1. [System.Web.Script.Services.ScriptMethod()]  
  2.    [System.Web.Services.WebMethod]  
  3.    public static List<string> GetCompletionList(string prefixText, int count)  
  4.    {  
  5.        using (SqlConnection con = new SqlConnection())  
  6.        {  
  7.            con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;  
  8.                     
  9.            using (SqlCommand com = new SqlCommand())  
  10.            {  
  11.                com.CommandText = "select Name from Employee where " + "Name like @Search + '%'";  
  12.                 
  13.                com.Parameters.AddWithValue("@Search", prefixText);  
  14.                com.Connection = con;  
  15.                con.Open();  
  16.                List<string> countryNames = new List<string>();  
  17.                using (SqlDataReader sdr = com.ExecuteReader())  
  18.                {  
  19.                    while (sdr.Read())  
  20.                    {  
  21.                        countryNames.Add(sdr["Name"].ToString());  
  22.                    }  
  23.                }  
  24.                con.Close();  
  25.                return countryNames;  
  26.                
  27.                 
  28.            }  
  29.            
  30.        }  
  31.       
  32.    } 
Comma Separated search
 
To allow a comma-separated search set the ajax AutoComplete extender property as DelimiterCharacters="," . Now run the application and the UI will look as follows:

 
 
Now type something into the TextBox and select the first text and provide a comma and again type into the TextBox, it will show search text as in the following:
 
 
 
Now you have seen how comma-separated text appears, the first selected text appears again. To avoid this, set the autocomplete extender property as in the following:
  1. ShowOnlyCurrentWordInCompletionListItem="true"  
 Now type after the comma, then the text will appears are as follows:
 
 
 
Now the only current text is appearing after the search.
 
Semi-colon separated search
 
You can also use a semicolon to search. For that we need to set the  autocomplete extender DelimiterCharacters property as in the following:
  1. DelimiterCharacters=";" 
Now run the application and type after the semicolon. Then the text will appear as follows:
 
 
 
Hyphen (-)  Separated search
 
You can also use a hyphen to search, for that we need to set the autocomplete extender DelimiterCharacters property as in the following:
  1. DelimiterCharacters=";"   
Now run the application and type after the hyphen then the text will appear as follows:
 
 
 
Similar to this, you can use any delimiter character to separate the search.
 
From all the preceding examples, we have learned how to search using special characters to separat the text .
 
Notes
  • For the detailed code, please download the sample Zip file.
  • Perform changes in the Web.config file, depending on your server location.
  • You need to use the Ajax Control Toolkit library.
  • To download the latest Ajax control toolkit, click here Ajax ContolToolkit Download .
Summary

For all the examples above, we have learned how to use the Ajax auto-complete extender to search using special charters. I hope this article is useful for all readers. If you have a suggestion then please contact me.


Similar Articles