Friday, July 20

AutoComplete Text Using Jquery and web services

               In this article i have explained by using jQuery and webservice how to show autocomplete text.

 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" "">
<html xmlns="">
<head runat="server">
<%--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) {
                        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) {
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
    <form id="form1" runat="server">
    <div class="data_development">
        <div class="data_header">
            <div class="overview">
                Employee List
        <div class="development_inner_data">
            <div class="form_general">
            <div class="form_header_top">
                <div class="label">
                    Tag :
                <div class="text_field">
                    <asp:TextBox ID="txtEmp" runat="server" CssClass="text_field_middle"></asp:TextBox>

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 = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components

    public string HelloWorld() {
        return "Hello World";
    public IList<string> GetAllEmployees(string keyWords)
        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);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            return result;
            return null;

 Here is my Database Scenario:-

Hope you like this article.

Thanks Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

shibashish mohanty