jQuery自动完成与callback阿贾克斯json
我试图find一种方法来使用jQuery自动完成与callback源通过从服务器的ajax json对象列表获取数据。
有人可以提供一些方向吗？
我GOOGLE了，但无法find一个完整的解决scheme。
自动完成文档中带有源代码的完美例子。
jQuery的
<script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", data: { q: request.term }, success: function( data ) { response( data ); } }); }, minLength: 3, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> HTML
<div class="ui-widget"> <label for="city">Your city: </label> <input id="city"> Powered by <a href="http://geonames.org">geonames.org</a> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>
如果你要返回一个复杂的json对象，你需要修改自动完成的成功函数，如下所示。
$.ajax({ url: "/Employees/SearchEmployees", dataType: "json", data: { searchText: request.term }, success: function (data) { response($.map(data.employees, function (item) { return { label: item.name, value: item.id }; })); } });
我的问题是，最终用户将开始在文本框中input并接收自动完成（ACP）build议，并更新呼叫控制，如果select了build议，因为ACP是默认devise的。 但是，我还需要使用特定于最终用户select的数据更新多个其他控件（文本框，DropDowns等）。 我一直在试图找出一个优雅的解决scheme，我觉得我开发的是值得分享的，希望至less可以节省一些时间。
WebMethod（SampleWM.aspx）：
-
目的：
- 捕获SQL Server存储过程结果并将它们作为JSONstring返回给AJAX调用程序
-
笔记：
- Data.GetDataTableFromSP（） – 是一个自定义函数，它从存储过程的结果中返回一个DataTable
- <System.Web.Services.WebMethod（EnableSession：= True）> _
- 公共共享函数GetAutoCompleteData（ByVal QueryFilterAsstring）作为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); } }); });
