如何使用隐藏字段选择具有ID /值对的jQuery自动完成功能

Question

我正在尝试使用jquery在asp.net中创建一个自动完成文本框。 我的要求是，当用户从自动完成文本框中选择一个值时，数据库中的行ID应该分配给隐藏字段。

我的asp页是：

<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>

我的服务页面是：

[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();
        }

我的对象属性文件是：

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;
        }
    }

服务输出：

页面输出：

Answer 1

从您的代码和图像中，我发现您的GetBudingName数据类型为xml。

但是，您的JavaScript数据类型为json，如下所示

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

更新：

将type: "POST"更改为type: "GET"