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.
By at
Labels: ,

3 comments:

Subscribe to: Post Comments (Atom)

Featured Post

Hybrid Connections WebSockets in Azure Relay

Hybrid Connections WebSockets in Azure Relay Source: https://learn.microsoft.com/en-us/azure/azure-relay/relay-hybrid-connections-dotnet-get...

Popular posts