【发布时间】：2011-08-18 21:38:55
【问题描述】：
我正在尝试让自动完成插件在一个文本框中填充大学名称，在另一个文本框中填充大学代码。下面的代码返回结果并填充大学名称文本框，但我不知道如何填充另一个输入。
我试过关注这个example，但遇到了问题，甚至调用了webmethod。一件奇怪的事情是，似乎在自动完成附加到用户键入的文本框之前调用了 ajax。不确定是什么触发了 js 调用自动完成方法。
我不得不将上面的部分与 jquery ui doc 结合使用 json (link) 进行自动完成。但我仍然不知道如何像第一个示例一样填充第二个输入。
有什么想法吗？
这里是 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; }
}
}
}
编辑
我能够通过添加选择事件来使其工作。在我之前的测试中，我把它放在那里，但是在错误的位置（最初嵌套在成功事件中）。还必须在设置值的成功事件中添加三行：item.Descr，Descr：item.Descr，和UnivCode：item.UnivCode。我不太明白这些引用的是什么或它们在做什么，因为输入的实际设置是在选择事件中完成的，在该事件中我指定了输入的实际 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;
}
});
});
【问题讨论】：
标签： jquery asp.net json jquery-ui autocomplete