Introduction:
In this article i have explained by using jQuery and webservice how to show autocomplete text.
Description:
Before i explain the functionality of this article i want to mention that previously i have written similar article like AutoComplete TextBox Fetching Name with ID From sqlserver database , Auto Complete Textbox To Store Id While Displaying Name .
I have provided here some screen shots for better understanding on this article.You have to follow the all steps what i have commented bellow.
First you have to create a web page and add one webservice as shown in following figures.
Here is my source code:-
Here is my Database Scenario:-
In this article i have explained by using jQuery and webservice how to show autocomplete text.
Description:
Before i explain the functionality of this article i want to mention that previously i have written similar article like AutoComplete TextBox Fetching Name with ID From sqlserver database , Auto Complete Textbox To Store Id While Displaying Name .
I have provided here some screen shots for better understanding on this article.You have to follow the all steps what i have commented bellow.
First you have to create a web page and add one webservice as shown in following figures.
Here is my source code:-
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="AutoCompleteJquery.aspx.cs"
Inherits="ERP_LMS_AutoCompleteJquery"
%>
<!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></title>
<%--you just take your available Script it may be any version--%>
<script src="Scripts/jquery-1.4.1-vsdoc.js"
type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.custom.min.js"
type="text/javascript"></script>
<link href="jquery-ui.css"
rel="stylesheet"
type="text/css"
/>
<link href="ken_cloud.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript"
language="javascript">
$(document).ready(function () {
$('#<%= txtEmp.ClientID %>').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
//make sure your webservice path is
correct
url: "WebServices/WebService.asmx/GetAllEmployees",
data: "{'keyWords':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="data_development">
<div class="data_header">
<div class="overview">
Employee List
</div>
</div>
<div class="development_inner_data">
<div class="form_general">
General
</div>
<div class="form_header_top">
<div
class="label">
Tag :
</div>
<div
class="text_field">
<asp:TextBox ID="txtEmp" runat="server"
CssClass="text_field_middle"></asp:TextBox>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Here is my Webservice:-
<%@ WebService
Language="C#"
CodeBehind="~/App_Code/WebService.cs"
Class="WebService"
%>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
// 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 WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string
HelloWorld() {
return "Hello
World";
}
[WebMethod]
public IList<string> GetAllEmployees(string
keyWords)
{
System.Threading.Thread.Sleep(1000);
IList<string>
result = new List<string>();
string conStr = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
SqlConnection cn = new
SqlConnection(conStr);
SqlCommand cmd = new
SqlCommand("select
* from employee where fname like '" + keyWords + "%'", cn);
try
{
cn.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["fname"].ToString());
}
cn.Close();
return result;
}
catch
{
return null;
}
}
}
Hope you like this article.
No comments:
Post a Comment
Please don't spam, spam comments is not allowed here.