How to select jquery autocomplete with ID/value pairs using a hidden field

Question

I'm trying to create a autocomplete text box in asp.net using jquery. My requirement is when the user select a value from autocomplete text box, the row id from the database should assign to the hidden field.

My asp page is:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../Scripts/jquery.js"></script>
    <script src="../Scripts/jquery-ui.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
        $(document).ready(function () {
            $('#MainContent_txtBuildingName').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "AutoCompleteService.asmx/GetBuildingName",
                        data: "{'term' : '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) {
                            alert('dataFilter:'+ data);
                            return data;
                        },
                        success: function (data) {
                            alert('Success:' + data);
                            response(data.d);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('textStatus:' + textStatus + 'XMLHttpRequest:' + XMLHttpRequest + 'errorThrown' + errorThrown);
                        }
                    });
                },
                minLength: 2,
                focus: function (event, ui) {
                    $('MainContent_txtBuildingName').val(ui.item.BuildingName);
                    $('hdnfBuildingId').val(ui.item.BuildingID);
                    return false;
                }
            }).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>').data('ui-autocomplete-item', item).append('<a>' + item.BuildingName + '</a>').appendTo(ul);
            };
        });
    </script>

    <div>
        Name : 
        <asp:TextBox ID="txtBuildingName" runat="server"></asp:TextBox>
        <asp:Button ID="btnSelect" runat="server" Text="Submit" />
        <asp:HiddenField ID="hdnfBuildingId" runat="server" />
    </div>
    <div>

My Service Page is:

[WebMethod]
        public List<PropBuilding> GetBuildingName(string term)
        {
            string conString = ConfigurationManager.ConnectionStrings["DatabaseConString"].ConnectionString;
            List<PropBuilding> buildingRes = new List<PropBuilding>();
            using (SqlConnection con = new SqlConnection(conString))
            {
                SqlCommand cmd = new SqlCommand("sp_GetDetailsOfBuilding", con);
                cmd.CommandType = System.Data.CommandType.StoredProcedure;

                SqlParameter param = new SqlParameter("@BuildingName", term ?? "");
                cmd.Parameters.Add(param);
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    PropBuilding prop = new PropBuilding();
                    prop.BuildingID = Convert.ToInt32(rdr["tc_BuildingID"]);
                    prop.BuildingName = rdr["tc_BuildingName"].ToString();
                    buildingRes.Add(prop);

                }
            }
            return buildingRes.ToList();
        }

My Object Property file is:

public class PropBuilding
    {
        public int BuildingID { get; set; }
        public string BuildingName { get; set; }
        public string BuildingCode { get; set; }
        public int NoOfRooms { get; set; }
        public string BuildingAddress { get; set; }

        public PropBuilding()
        {

        }

        public PropBuilding(int BuildlingID, string BuildingName)
        {
            this.BuildingID = BuildlingID;
            this.BuildingName = BuildingName;
        }
    }

Service output:

The page output:

Answer 1

From your code and image, I found that you GetBudingName data type is xml.

However, your javascript data type is json as below

url: "AutoCompleteService.asmx/GetBuildingName",
...
dataType: "json",

Update:

change type: "POST" to type: "GET"