Jquery ui 自动完成用 ID 填充隐藏字段

Question

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

我尝试按照此 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 web 方法

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

编辑

我能够通过添加选择事件来使其工作。在我之前的测试中，我把它放在那里，但在错误的位置(最初嵌套在成功事件中)。还必须在成功事件中添加设置值的三行: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;
            }
        });
    });

Answer 1

我能够通过添加选择事件来使其工作。在我之前的测试中，我把它放在那里，但在错误的位置(最初嵌套在成功事件中)。还必须在成功事件中添加设置值的三行: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;
        }
    });
});