Friday, July 20

AutoComplete Text Using Jquery and web services

 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:-

<%@ 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;
        }
    }
}


 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.

ShibashishMnty
shibashish mohanty