jquery - jQuery UI自动完成填充ID的隐藏字段

我正在尝试获取自动完成插件，以使用大学名称填充一个文本框，并使用大学代码填充另一个文本框。下面的代码返回结果并填充大学名称文本框，但是我不知道如何填充另一个输入。

我尝试遵循此example，但是遇到了问题，甚至无法调用webmethod。奇怪的是，似乎在自动完成功能附加到用户键入的文本框之前调用了ajax。不知道是什么触发了js调用自动完成方法。

我不得不使用json（link）将上述内容与jquery ui文档结合在一起以实现自动完成。但是我仍然不知道如何像第一个示例中那样填充第二个输入。

有任何想法吗？

这是jQuery和HTML

<script language="javascript" type="text/javascript">
    $(function () {
        $("#university").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "AutoComplete.asmx/GetUniversities",
                    dataType: "json",
                    data: "{ 'data': '" + request.term + "' }",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                value: item.Descr,
                                UnivCode: item.UnivCode

                            }
                        }));
                    }
                });
            }
        });
    });
</script>
<div class="ui-widget">
    <label for="university">University: </label>
    <input id="university" type="text"/>
    <label for="universityID">ID: </label>
    <input id="universityID" type="text" />
</div>

这是我的.net网络方法

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Web.Script.Services;
using System.Text;
using System.Data;

[ScriptService()]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class AutoComplete : System.Web.Services.WebService
{

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<University> GetUniversities(string data)
    {
        List<University> UniversityList = new List<University>();

        try
        {
            clsDataBase db = new clsDataBase();
            DataTable dt = new DataTable();
            StringBuilder sql = new StringBuilder();
            Dictionary<string, object> parms = new Dictionary<string, object>();

            sql.Append(" SELECT univ_code ");
            sql.Append(" , INITCAP(univ_desc) AS descr ");
            sql.Append(" FROM lk_university ");
            sql.Append(" WHERE UPPER(univ_desc) LIKE UPPER(?) ");
            sql.Append(" ORDER BY univ_desc  ");
            parms.Add("university", "%" + data + "%");

            dt = db.executeParmQuery(sql.ToString(), parms);
            DataView dv = new DataView(dt);


            ArrayList filteredList = new ArrayList();

            foreach (DataRowView drv in dv)
            {
                University university = new University();
                university.UnivCode= drv["univ_code"].ToString();
                university.Descr = drv["descr"].ToString();

                UniversityList.Add(university);
            }
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
            //return null;
        }
        //}
        return UniversityList;
    }


    public class University
    {
        string _value;
        public string value
        {
            get { return _Descr + " (" + _UnivCode + ")"; }
        }

        string _Descr;
        public string Descr
        {
            get { return _Descr; }
            set { _Descr = value; }
        }

        string _UnivCode;
        public string UnivCode
        {
            get { return _UnivCode; }
            set { _UnivCode = value; }
        }
    }
}

编辑

通过添加select事件，我可以使它正常工作。在我以前的测试中，我在那儿放了它，但是在错误的位置（最初嵌套在成功事件中）。还必须在成功事件中添加设置值的三行：item.Descr，Descr：item.Descr和UnivCode：item.UnivCode。我不太了解这些引用或它们在做什么，因为输入的实际设置是在select事件中完成的，在事件中我指定了输入的实际ID（$（'＃university'）。val（ui .item.Descr）;），但这是使代码正常工作所必需的。

这是工作中的jQuery，没有对html或.net代码进行任何其他更改。

<script language="javascript" type="text/javascript">
    $(function () {
        $("#university").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "AutoComplete.asmx/GetUniversities",
                    dataType: "json",
                    data: "{ 'data': '" + request.term + "' }",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                value: item.Descr,
                                Descr: item.Descr,
                                UnivCode: item.UnivCode
                            }
                        }));
                    }
                });
            },
            select: function (event, ui) {
                $('#university').val(ui.item.Descr);
                $('#universityID').val(ui.item.UnivCode);
                return false;
            }
        });
    });

最佳答案

通过添加select事件，我可以使它正常工作。在我以前的测试中，我在那儿放了它，但是在错误的位置（最初嵌套在成功事件中）。还必须在成功事件中添加设置值的三行：item.Descr，Descr：item.Descr和UnivCode：item.UnivCode。我不太了解这些引用或它们在做什么，因为输入的实际设置是在select事件中完成的，在事件中我指定了输入的实际ID（$（'＃university'）。val（ui .item.Descr）;），但这是使代码正常工作所必需的。

这是工作中的jQuery，没有对html或.net代码进行任何其他更改。

$(function () {
    $("#university").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: "AutoComplete.asmx/GetUniversities",
                dataType: "json",
                data: "{ 'data': '" + request.term + "' }",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            value: item.Descr,
                            Descr: item.Descr,
                            UnivCode: item.UnivCode
                        }
                    }));
                }
            });
        },
        select: function (event, ui) {
            $('#university').val(ui.item.Descr);
            $('#universityID').val(ui.item.UnivCode);
            return false;
        }
    });
});