Monday, March 31, 2014

AutoComplete with Jquery and database

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autowithjquery.aspx.cs" Inherits="autowithjquery" %>

<!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">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script language="javascript" type="text/javascript">
            $(function () {
                $('#<%=txtCompanyName.ClientID%>').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "autowithjquery.aspx/GetCompanyName",
                            data: "{ 'pre':'" + request.term + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                response($.map(data.d, function (item) {
                                    return { value: item }
                                }))
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(textStatus);
                            }
                        });
                    }
                });
            });
</script>

</head>
<body>
    <form id="form1" runat="server">
   <h3>Auto Complete Textbox without using Web Service</h3>
<table>
    <tr>
        <td>Type Company Name: </td>
        <td>
            <div class="ui-widget" style="text-align:left">
                 <asp:TextBox ID="txtCompanyName" runat="server" Width="350px" CssClass="textboxAuto"  Font-Size="12px" />
            </div>
        </td>
    </tr>      
</table>  

    </form>
</body>
</html>
//

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

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

    }
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<string> GetCompanyName(string pre)
    {
        List<string> allCompanyName = new List<string>();

        DataTable dt = new DataTable();
        string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
        SqlConnection con = new SqlConnection(constr);
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from TblCountry where CountryName like @City+'%'", con);
        cmd.Parameters.AddWithValue("@City", pre);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        adp.Fill(dt);
        List<string> CityNames = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            allCompanyName.Add(dt.Rows[i][1].ToString());
        }
        return allCompanyName;
    }

}

No comments:

Post a Comment