返回自动执行ajax,带有回调Ajax JSON的jQuery自动完成

我的问题是，如果默认情况下选择了ACP，则最终用户将开始在文本框中键入内容并接收自动完成(ACP)建议并更新呼叫控件。但是，我还需要使用特定于最终用户选择的数据来更新多个其他控件(文本框，DropDowns等)。我一直在努力寻找一种解决问题的优雅方法，我认为我所开发的方法值得分享，并希望至少可以节省您一些时间。

WebMethod(SampleWM.aspx)：

目的：

捕获SQL Server存储过程结果并将其作为JSON字符串返回给AJAX调用程序

笔记：

Data.GetDataTableFromSP()-是一个自定义函数，可从存储过程的结果返回DataTable

_

公共共享函数GetAutoCompleteData(ByVal QueryFilterAs String)As String

//Call to custom function to return SP results as a DataTable

// DataTable will consist of Field0 - Field5

Dim params As ArrayList = New ArrayList

params.Add("@QueryFilter|" & QueryFilter)

Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr])

//Create a StringBuilder Obj to hold the JSON

//IE: [{"Field0":"0","Field1":"Test","Field2":"Jason","Field3":"Smith","Field4":"32","Field5":"888-555-1212"},{"Field0":"1","Field1":"Test2","Field2":"Jane","Field3":"Doe","Field4":"25","Field5":"888-555-1414"}]

Dim jStr As StringBuilder = New StringBuilder

//Loop the DataTable and convert row into JSON String

If dt.Rows.Count > 0 Then

jStr.Append("[")

Dim RowCnt As Integer = 1

For Each r As DataRow In dt.Rows

jStr.Append("{")

Dim ColCnt As Integer = 0

For Each c As DataColumn In dt.Columns

If ColCnt = 0 Then

jStr.Append("""" & c.ColumnName & """:""" & r(c.ColumnName) & """")

Else

jStr.Append(",""" & c.ColumnName & """:""" & r(c.ColumnName) & """")

End If

ColCnt += 1

Next

If Not RowCnt = dt.Rows.Count Then

jStr.Append("},")

Else

jStr.Append("}")

End If

RowCnt += 1

Next

jStr.Append("]")

End If

//Return JSON to WebMethod Caller

Return jStr.ToString

自动完成jQuery(AutoComplete.aspx)：

目的：

执行对WebMethod的Ajax请求，然后处理响应

$(function() {

$("#LookUp").autocomplete({

source: function (request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "SampleWM.aspx/GetAutoCompleteData",

dataType: "json",

data:'{QueryFilter: "' + request.term  + '"}',

success: function (data) {

response($.map($.parseJSON(data.d), function (item) {

var AC = new Object();

//autocomplete default values REQUIRED

AC.label = item.Field0;

AC.value = item.Field1;

//extend values

AC.FirstName = item.Field2;

AC.LastName = item.Field3;

AC.Age = item.Field4;

AC.Phone = item.Field5;

return AC

}));

}

});

},

minLength: 3,

select: function (event, ui) {

$("#txtFirstName").val(ui.item.FirstName);

$("#txtLastName").val(ui.item.LastName);

$("#ddlAge").val(ui.item.Age);

$("#txtPhone").val(ui.item.Phone);

}

});

});