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

Question

我正在尝试使用自动完成插件来填充一个带有大学名称的文本框和另一个带有大学代码的文本框.下面的代码返回结果并填充大学名称文本框,但我无法弄清楚如何填充另一个输入.

我已经尝试过这个例子,但是甚至在调用webmethod时遇到了问题.关于这一点的一个奇怪的事情是,似乎在将自动完成附加到用户键入的文本框之前调用了ajax.不知道是什么触发了js来调用自动完成方法.

我必须使用json(链接)将上面的部分与自动完成的jquery ui doc结合起来.但我仍然不知道如何在第一个例子中填充第二个输入.

有任何想法吗？

这是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 webmethod

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

Answer 1

通过添加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;
        }
    });
});