Autocomplete TextBox with selection :: Facebook Clone

One day i was actually thinking about implementation of auto complete text box in facebook. Then i received a email request from one my friend about same asking me how to implement Facebook like expanding textbox with Jquery. Then i started working and sample post for implementation logic.

C# : Server Side Code

    [WebMethod]
    public static string getTableData(string Keyword)
    {
        StringBuilder sb = new StringBuilder();
        if (!string.IsNullOrEmpty(Keyword))
        {
            DataTable dt = createDataSource();
            DataView dv = dt.DefaultView;
            dv.RowFilter = string.Format("{0} like '%{1}%'", "name", Keyword);
            dv.Sort = "name asc";
            foreach (DataRowView dr in dv)
            {
                sb.Append("");
                sb.Append("");
                sb.Append(string.Format("", dr["image"].ToString()));
                sb.Append(string.Format("", dr["name"].ToString()));
                sb.Append("");
                sb.Append(string.Format("", dr["location"].ToString()));
                sb.Append("

 {0}
 {0}

");
            }
        }
        return sb.ToString();
    }

CSS Style

        body{ font:normal 8pt tahoma;}
        #wrap{ width:900px; margin:40px auto 0 auto;}
        #loading
        {
            background:url('loading.gif') no-repeat left top;
            width:18px; height:16px; position:absolute; display:none;
        }
        #autoCompleteBox{border:1px solid #6b86b5; width:300px;}
        #autoCompleteBox span
        { 
            float:left; display:block; 
            background-color:#e7e7f7; 
            border:1px solid #9caece; 
            padding:2px; 
            margin:3px;
        }
        #autoCompleteBox input[type="text"]
        { 
            border:none; width:100px;
            padding:5px; 
            font:normal 8pt tahoma,arial;
        }
        #autoCompleteList
        { 
            width:300px; display:none; 
            padding:3px; position:absolute; top:65px; 
            border:1px solid #313031; 
            border-bottom:2px solid #293c6b; 
            background-color:#fff;
        }
        #autoCompleteList a{ display:block; margin-bottom:5px; text-decoration:none;}
        #autoCompleteList a:hover{ background-color:#6b86b5;}  
        #autoCompleteList a:hover table td{ color:#fff;}
        #autoCompleteList a:hover table td b{ color:#fff;}
        #autoCompleteList table
        {
            font-size:8.5pt; 
            border-collapse:collapse;
        }
        #autoCompleteList td
        { 
            vertical-align:top; 
            line-height:8pt; color:#666;
        }
        #autoCompleteList td b{ color:#000;}
        #autoCompleteList img{ border:none;}
    

ASPX page

JQuery Code

$(document).ready(function(e) 
        {
            $('#autoCompleteBox').bind("click",function(clickEvt){
                $(this).find("input").focus();
            });
            /*set loader position*/
            var boxOffsets = $('#autoCompleteBox').offset();
            var boxWidth=$('#autoCompleteBox').width();
            $('#loading').css("left", boxOffsets.left + boxWidth-18);
            $('#loading').css("top", boxOffsets.top + 5);
            $("#autoCompleteBox").find("input").bind("keyup", function(evt) {
                $(this).attr("id","controlId"+Math.random()); // To stop autocomplete of browser, chnage text box id randomly
                var keyword = $(this).val();
                keyword = keyword.trim();
                if (keyword != " ") {
                    $('#autoCompleteBox').ajaxStart(function() {
                        $('#loading').show();
                    });

                    $.ajax({
                        type: "POST",
                        url: window.location.pathname+ "/getTableData",
                        dataType: "json",
                        data: "{'Keyword':'" + keyword + "'}",
                        contentType: "application/json; charset=utf-8",
                        success: function(msg) {
                            $("#autoCompleteList").html(msg.d);
                            var listOffsets=$("#autoCompleteBox").offset();
                            var listHeight=$("#autoCompleteBox").height();
                            $("#autoCompleteList").css("top",listOffsets.top+listHeight+2);
                            /*remove duplicate value from list, which is already selected*/
                            $.each($("#autoCompleteBox").find("span"), function(index, value) {
                                var _currentValue = $(this).text().replace($(this).find('a').text(),'');
                                $.each($('#autoCompleteList table').find("td:eq(1)"), function(anchorIndex) {
                                    if ($(this).text().indexOf(_currentValue) >= 0) {
                                        $('#autoCompleteList a').eq(anchorIndex).remove();
                                    }
                                });
                            });

                            $('#loading').hide();
                            if ($("#autoCompleteList").html() != "") {
                                $("#autoCompleteList").show();
                            }
                            else { $("#autoCompleteList").hide(); }
                            
                            /*Bind click on autocomplete list items*/
                            $("#autoCompleteList").find("a").bind("click", function(aclick) {
                                var _uname = $(this).find("td:eq(1)").text();
                                _uname = "" + _uname + "X";
                                $('#autoCompleteBox').prepend(_uname);
                                $("#autoCompleteList").hide();
                                $("#autoCompleteBox").find("input").val("");
                                $("#autoCompleteBox").find("input").focus();
                                $()
                            });
                        },
                        error: function(eMSG) {
                            alert(eMSG.status);
                        }
                    });
                }
            });
        });
        function closeThis(spanObj)
        {
           $(spanObj).parent().remove();
           $("#autoCompleteBox").find("input").focus();
        }