我正在尝试让自动完成插件在一个文本框中填充大学名称，在另一个文本框中填充大学代码。下面的代码返回结果并填充大学名称文本框，但我不知道如何填充另一个输入。
我尝试按照此 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;
}
});
});
最佳答案
我能够通过添加选择事件来使其工作。在我之前的测试中，我把它放在那里，但在错误的位置(最初嵌套在成功事件中)。还必须在成功事件中添加设置值的三行: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;
}
});
});
关于Jquery ui 自动完成用 ID 填充隐藏字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5890025/