How to Create jQuery AutoComplete Textbox in ASP.Net

Chandradev Prasad

5y153k16100Article

ASP.NET jQueryJQuery Autocomplete TextBox

16 Comments

Join the conversation! Your thoughts help the community grow.

dailycatchon dailycatchon7y ago
My rightclick and copy paste has been disabled please tell a solution
Sandipta Sahu7y ago
Wats app no plz, need more help a lot of my projects
Sandipta Sahu7y ago
Thanks bro done my job.
Avinash Rao11y ago
instead of sql i need to work in mysql db with stored procedures can u plz explain how to do it
sachin patil11y ago
Thanks much, nice article
Upendra Pratap Shahi11y ago
nice
chakradhar juturu11y ago
chandradev sir,thanksfor ur code.but i want to know after selecting the username its could be split into other textbox.can u tell me ???how ?
Chandradev Prasad12y ago
Nice to know that. You had fixed your problem.
Dammy Subayr12y ago
its working now had to comment out this line from RouteConfig.cs settings AutoRedirectMode = RedirectMode.Permanent and used <%=ResolveUrl("webform.aspx/getlist")%> for the ajax url and moved the script to body tag at the bottom
Chandradev Prasad12y ago
have u given proper URL with exact method Name ?
Dammy Subayr12y ago
the error is for $.map line in the response{}
Dammy Subayr12y ago
tried it but I keep getting this error in the jquery file "Unable to get property 'lenght' of undefined or null references", and it points to the response line, how can I resolve this thanks
Chandradev Prasad12y ago
Thank you.
Saineshwar Bageri12y ago
nice article
Kel Kel12y ago
Hi, I'm having an error message "Instance failure"
- Chandradev Prasad12y ago
  have you given proper URL while calling the webmethod ? i.e url: "WebForm1.aspx/GetEmpNames"

There are so many ways to create an Auto Complete TextBox in ASP.NET like using an Ajax AutoComplete Control with Web Service and WCF. But here we will see how to use jQuery UI autocomplete functionality in ASP.NET.

Pre-requisites

Create the simple table tblEmp with Id and EmpName Field in SQL Server
Download the Plugin in the local system or use the online plugin as in the following:

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"

You can see here what can you do from the Jquery-ui plugin.

http://jqueryui.com

Now we will see the AutoComplete functionality of the jQuery UI. In this sample I will use the online plugin.

Step 1: Create the aspx page with TextBox control and the jQuery required plugin in the Head portion of the HTML.

Step 2: Write the jQuery UI auto complete jQuery syntax with Ajax web method as given below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("#txtEmpName").autocomplete({
source: function (request, response) {
var param = { empName: $('#txtEmpName').val() };
$.ajax({
url: "WebForm1.aspx/GetEmpNames",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert(err.Message)
// console.log("Ajax Error!");
}
});
},
minLength: 2 //This is the Char length of inputTextBox
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
EmpName : <asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
<br />
<br />
<br />
</div>
</form>
</body>
</html>

Step 3: Write the code in the code behind file using Webmethod like this:

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
namespace AjaxTest
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<string> GetEmpNames(string empName)
{
List<string> Emp = new List<string>();
string query = string.Format("SELECT EmpName FROM tblEmp WHERE EmpName LIKE '%{0}%'", empName);
using (SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=Test;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
Emp.Add(reader.GetString(0));
}
}
}
return Emp;
}
}
}

Summary

This article showed how to use a jQuery UI AutoComplete in ASP.NET using jQuery theme. Let me know if you have a better approach for this.