Update Pannel

 
<asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server" ForeColor="red" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server" /><br />
 <asp:Button ID="Button1" runat="server"
 Text="Update Both Panels" OnClick="Button1_Click" />
 <asp:Button ID="Button2" runat="server"
 Text="Update This Panel" OnClick="Button2_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>

sql reader

public DataTable ExecuteRreader(string sp_name, Dictionary<string, object> parameters)
    {
        using (SqlConnection sqlConnection = new SqlConnection(connectionString))
        {
            SqlCommand sqlCommand = new SqlCommand(sp_name, sqlConnection);
            sqlCommand.CommandType = CommandType.StoredProcedure;
            if (parameters != null)
            {
                foreach (KeyValuePair<string, object> parameter in parameters)
                    sqlCommand.Parameters.AddWithValue(parameter.Key, parameter.Value);
            }
            DataTable dataTable = new DataTable();
            sqlConnection.Open();
            using (SqlDataReader sqlDataReader = sqlCommand.ExecuteReader())
            {
                dataTable.Load(sqlDataReader);
            }
            return dataTable;
        }
    }

autocomplete WebMothod with select event

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
    </script>
    <link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
   $("#nameText").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Default4.aspx/getdatas",
                    data: "{strterm: '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.label ,
                                value: item.record,
                                id: item.type,
                                first: item.key,
                                last: item.key
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
             $("#TextBox1").val(ui.item.id);
            },
            minLength: 1
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + item.value + item.id + item.first + "</a>")
            .appendTo(ul);
        };
});
</script>

autocomplete jquery with select event

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
    </script>
    <link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
    $(function () {

var availableItems = [{
    value: "recent",
    label: "Recent",
    classN: "heading"
}, {
    value: "all",
    label: "All",
    classN: "all"
}, {
    value: "lorem",
    label: "Lorem",
    classN: "lorem"
}, ];

$(".post-to").autocomplete({
    source: availableItems,
    minLength: 0,
    focus: function (event, ui) {
        $('.post-to').val(ui.item.label);
        alert(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        alert(ui.item.label);
        return false;
    }
}).on("focus", function () {
    $(this).autocomplete("search", '');
}).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            //instead of <span> use <a>
            .append("<a class='" + item.classN + "'></a><a>" + item.label + "</a>")
            .appendTo(ul);
};
});
    </script>