Share Blog

Saturday, September 26, 2015

How To Create JQuery UI AutComplete Textbox with Database in Asp.net

We Need  to Create Table in Database to Save user details in database.
CREATE TABLE Leader(
      LeaderId int IDENTITY(1,1)PRIMARY Key NOT NULL,
      Leader_Name nvarchar(150) NULL,
      State nvarchar(150) NULL,
      Lok_Sabha_Place nvarchar(150) NULL
)

Write the following code in your aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
    });
    function SearchText() {
        $(".autosuggest").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/GetAutoCompleteData",
                    data: "{'username':'" + document.getElementById('txtLeader').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
   
<div >
<label id="lblleader" runat="server">Enter MP Name: </label>

    <asp:TextBox ID="txtLeader" runat="server" class="autosuggest"></asp:TextBox>
</div>
    </form>
</body>
</html>

Now Open code behind file and add following namespaces
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

C#.net Code
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;


public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]

    public static List<string> GetAutoCompleteData(string username)
    {
        List<string> result = new List<string>();
        using (SqlConnection con = new SqlConnection("Data Source=lenovo-pc;Initial Catalog=Digital_Politices;Integrated Security=True"))
        {
            using (SqlCommand cmd = new SqlCommand("select DISTINCT Leader_Name from Leader where Leader_Name LIKE '%'+@SearchText+'%'", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@SearchText", username);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(dr["Leader_Name"].ToString());
                }
                return result;
            }
        }
    }

}


DEMO


No comments:

Post a Comment