This article will show you how you can create a Auto
complete Using jQuery In Asp.Net and C#.Net. In this article I have used a web
service for getting the data. This article has been used jQuery UI Autocomplete
textbox functionality.
Some of my previous articles are as follows: jQuery
Datepicker Calendar With Multiple Months in Asp.net, Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, Display
Watermark Text in a Password TextBox Using jQuery In Asp.Net, Validate
Selection Of Checkbox In GirdView Using Asp.net C# and jQuery | Force User To
Select One CheckBox Of GridView Before Submit in Asp.net Using javascript.
So for this article first we will create a new asp.net application and add a web service (.asmx) file in it. Now add the below code into your .asmx file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Web.Script.Services;
using System.Data.SqlClient;
namespace ProjectDemo_Asp.et
{
///
/// Summary description for AutoComplete
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string[] AutoCompleteAjaxRequest(string prefixText)
{
List<string> ajaxDataCollection = new List<string>();
DataTable _objdt = new DataTable();
_objdt = GetDataFromDataBase(prefixText);
if(_objdt.Rows.Count>0)
{
for (int i = 0; i < _objdt.Rows.Count; i++)
{
ajaxDataCollection.Add(_objdt.Rows[i]["LanguageName"].ToString());
}
}
return ajaxDataCollection.ToArray();
}
///
/// Function for retrieving data from database
///
public DataTable GetDataFromDataBase(string prefixText)
{
string connectionstring = "<-- --="" connection="" string="" your="">";
DataTable _objdt = new DataTable();
string querystring = "select * from ProLanguage where LanguageName like '%" + prefixText + "%';";
SqlConnection _objcon = new SqlConnection(connectionstring);
SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
_objcon.Open();
_objda.Fill(_objdt);
return _objdt;
}
}
}
|
In above code I have accessed the passed key value in AutoCompleteAjaxRequest(string prefixText) method
and then pass it to the method for getting the data from databse.
Now come to your .aspx page. In this page add the below
code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutocompleteTextBoxUsingjQuery.aspx.cs"
Inherits="ProjectDemo_Asp.et.AutocompleteTextBoxUsingjQuery"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Autocomplete
Using jQuery In Asp.Net and C#.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
body
{
font-size:
70%;
}
</style>
<script type="text/javascript">
$(document).ready(function
() {
$("#<%=TextBox1.ClientID
%>").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoComplete.asmx/AutoCompleteAjaxRequest",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'prefixText' : '" + $("#<%=TextBox1.ClientID %>").val() + "'}",
success: function (data) {
response($.map(data.d, function (item)
{
return {
label:
item,
value:
item
}
}))
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="font-size: 14px;">
Search :
<asp:TextBox ID="TextBox1" runat="server" Width="200px"></asp:TextBox>
</div>
</form>
</body>
</html>
|
In above jQuery code I have given the reference of the web service, and pass the value of which is entered into the textbox.
Now we have done run the application and check the output.
About the Author
Its greate, but I have a question. how to get Id after select text from Autosuggest.
ReplyDeleteThanks
Hi please chek the below mention code. this is used for getting selected text.
Deletereturn {
label: item,
value: item
}
Its Great, But I have a question. How to get id after select text fron thia autosuggest control
ReplyDelete