Facebook like search box with auto complete using jquery, ajax and Asp.net

Hello

Today I am going to show how to create a simple asp.net code through which you can build a Facebook like search  

Step 1

Creating the required tables in database

Create a tale in database through we are going to fetch data and display result

CREATE TABLE [dbo].[test_auto_complete](

      [uid] [int] IDENTITY(1,1) NOT NULL,

      [username] [varchar](30) NULL,

      [email] [varchar](100) NULL,

      [media] [varchar](200) NOT NULL,

      [country] [varchar](200) NOT NULL

)

Insert some data in datbase you have just created .

Step 2

Now create a asp page in vs and add the following section in the head seaction

1)  Ajax funtion and javascript

<script type="text/javascript">

    $(function () {

        $(".search").keyup(function () {

            var inputSearch = $(this).val();

            var dataString = 'searchword=' + inputSearch;

            if (inputSearch != '') {

                $.ajax({

                    type: "POST",

                    url: "Search.aspx",

                    data: dataString,

                    cache: false,

                    success: function (html) {

                        $("#divResult").html(html).show();

                    }

                });

            } return false;

        });

        jQuery("#divResult").live("click", function (e) {

            var $clicked = $(e.target);

            var $name = $clicked.find('.name').html();

            var decoded = $("<div/>").html($name).text();

            $('#inputSearch').val(decoded);

        });

        jQuery(document).live("click", function (e) {

            var $clicked = $(e.target);

            if (!$clicked.hasClass("search")) {

                jQuery("#divResult").fadeOut();

            }

        });

        $('#inputSearch').click(function () {

            jQuery("#divResult").fadeIn();

        });

    });

</script>

2)  Html Part

<div class="contentArea">

<input type="text" class="search" id="inputSearch" /> Ex: manish, m,<br />

<div id="divResult">

</div>

</div>

3)   Style for serach result

<style type="text/css">

       body{

              font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

       }

       .contentArea{

              width:600px;

              margin:0 auto;

       }

       #inputSearch

       {

              width:350px;

              border:solid 1px #000;

              padding:3px;

       }

       #divResult

       {

              position:absolute;

              width:350px;

              display:none;

              margin-top:-1px;

              border:solid 1px #dedede;

              border-top:0px;

              overflow:hidden;

              border-bottom-right-radius: 6px;

              border-bottom-left-radius: 6px;

              -moz-border-bottom-right-radius: 6px;

              -moz-border-bottom-left-radius: 6px;

              box-shadow: 0px 0px 5px #999;

              border-width: 3px 1px 1px;

              border-style: solid;

              border-color: #333 #DEDEDE #DEDEDE;

              background-color: white;

       }

       .display_box

       {

              padding:4px; border-top:solid 1px #dedede;

              font-size:12px; height:50px;

       }

       .display_box:hover

       {

              background:#3bb998;

              color:#FFFFFF;

              cursor:pointer;

       }

</style>

Now create a name Search.aspx which we will call from textbox via Ajax to get result .this page will have all database connection coding.

Search page .cs page code

public partial class Search : System.Web.UI.Page

{

    SqlConnection ora = new SqlConnection("Data Source=192.168.1.1;Initial Catalog=database;Persist Security Info=True;User ID=usernane;Password=password");

    SqlCommand cmd;

    SqlDataReader dr;

    protected void Page_Load(object sender, EventArgs e)

    {

        String q = Request.Params[0];

        ora.Open();

      //  cmd = new SqlCommand("select media,username,email,country from test_auto_complete where username like '%"+q+"' or email like '%"+q+"'", ora);

        cmd = new SqlCommand("select media,username,email,country from test_auto_complete where username like '%" + q + "%' or email like '%" + q + "%'", ora);

        try                                                                                            

        {

            dr = cmd.ExecuteReader();

            while (dr.Read())

            {

                string media = dr.GetValue(0).ToString();

                string username = dr.GetValue(1).ToString();

                string email = dr.GetValue(2).ToString();

                string country = dr.GetValue(3).ToString();

                Response.Write("<div class='display_box' align='left'><img src='" + media + "' style='width:50px; height:50px; float:left; margin-right:6px;' /><span class='name'>" + username + "</span>&nbsp;<br/>" + email + "<br/><span style='font-size:9px; color:#999999'>" + country + "</span></div>");

            }

        }

        catch (Exception ex)

        {

            Response.Write(ex.ToString());

        }

        ora.Close();

    }

}

Online Demo
You can view an online demo at this link Online Demo

You can download complete project  code from here Click here