Monday, October 7, 2013

JQuery UI autocomplete textbox with database in asp.net

WebForm1.aspx:-
-------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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 type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $("#txtSearch").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "WebForm2.aspx/GetAutoCompleteData",
                        data: "{'username':'" + $("#txtSearch").val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
                select: function (event, ui) {
                    fillDdl(ui.item.value);
                }
            });
            function fillDdl(value) {
                $.ajax({
                    url: "WebForm2.aspx?name=" + value,
                    async: true,
                    data: {
                    },
                    success: function (data) {
                        var n = data.split(",");
                        for (var i = 0; i < n.length; i++) {
                            var newOption = $('<option value="' + n[i] + '">' + n[i] + '</option>');
                            $('#ddl').append(newOption);
                        }
                    },
                    error: function (data) {
                        alert(data);
                    }
                });
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label for="lblSearch">Search: </label>           
            <input id="txtSearch" />
            <select id="ddl">
                <option>Select</option>
            </select>
        </div>
    </form>
</body>
</html>


WebForm2.aspx.cs:-
-----------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string strName = Request.QueryString["name"];
            if (strName != "" && strName != null)
            {
                var strResult1 = "a,b,c,d";
                HttpContext.Current.Response.Clear();
                HttpContext.Current.Response.Write(strResult1);
                HttpContext.Current.Response.End();
            }
        }
        [WebMethod]
        public static List<string> GetAutoCompleteData(string username)
        {
            List<string> result = new List<string>();
            result.Add("one");
            result.Add("two");
            result.Add("three");
            return result;
        }

        //[WebMethod]
        //public static List<string> GetAutoCompleteData(string username)
        //{
        //    List<string> result = new List<string>();
        //    using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
        //    {
        //        using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))
        //        {
        //            con.Open();
        //            cmd.Parameters.AddWithValue("@SearchText", username);
        //            SqlDataReader dr = cmd.ExecuteReader();
        //            while (dr.Read())
        //            {
        //                result.Add(dr["UserName"].ToString());
        //            }
        //            return result;
        //        }
        //    }
        //}
    }

}
---------------------------------------------------------------------------
Other Example:-
------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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 type="text/javascript">
        $(function () {
            var x = [
            { label: 'apple', value: 'Delicious' },
            { label: 'kiwi', value: 'Yummy' },
            { label: 'kiwiooo', value: 'aaa' },
            { label: 'lemon', value: 'Sour' }
            ];
            $("#fruit").autocomplete({
                source: x,
                focus: function () { return false; }
            })
            .on('autocompleteresponse autocompleteselect', function (e, ui) {
                var t = $(this),
                    details = $('#details'),
                    label = (e.type == 'autocompleteresponse' ? ui.content[0].label : ui.item.label),
                    value = (e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value);
                t.val(label);
                details.val(value);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id='fruit' name='fruit' type='text'>
            <input id='details' name='details' type='text'>
        </div>
    </form>
</body>
</html>


Thank You.

1 comment:

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts