【发布时间】：2012-03-28 05:31:15
【问题描述】：
我正在尝试找到一种方法来使用带有回调源的 jQuery 自动完成功能，通过 ajax json 对象列表从服务器获取数据。
有人可以指点一下吗？
我搜索了它，但找不到完整的解决方案。
【问题讨论】：
标签： jquery json autocomplete
【发布时间】：2012-03-28 05:31:15
【问题描述】：
Autocomplete docs 中带有源代码的完美示例。
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>
【讨论】：
-
这是一个 jquery ui 示例。
-
@RNKushwaha 如果您注意到，顶部有一个名为
log的日志记录函数。 -
看不懂
success: function( data ) {response( data );} works inside the ajax call. I mean, what is thatresponse()`的作用是什么？它会根据数据创建一些<li>elements 但如果我想自定义<li>元素，我该怎么办？我想添加一对属性... -
我在 Rails 中工作，我的控制器返回 format.json { render json: @products.map(&:name).to_json }，我不得不删除数据类型：“jsonp”在上面的示例中以使其正常工作。
-
@michel ，请从 dataType: "jsonp" 中删除单词 "p"
如果您要返回一个复杂的 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
};
}));
}
});
【讨论】：
-
对我来说这是返回空结果。结果本身（空表）显示在输入框下方，但没有任何内容。
我的问题是最终用户将开始在文本框中输入并接收自动完成 (ACP) 建议并更新调用控件，如果选择了建议，因为 ACP 是默认设计的。但是，我还需要使用特定于最终用户选择的数据来更新多个其他控件（文本框、下拉菜单等）。我一直在尝试找出一个优雅的解决方案来解决这个问题，我觉得我开发的解决方案值得分享，希望至少可以为您节省一些时间。
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);
}
});
});
【讨论】：
$(document).on('keyup','#search_product',function(){
$( "#search_product" ).autocomplete({
source:function(request,response){
$.post("<?= base_url('ecommerce/autocomplete') ?>",{'name':$( "#search_product" ).val()}).done(function(data, status){
response(JSON.parse(data));
});
}
});
});
PHP 代码：
public function autocomplete(){
$name=$_POST['name'];
$result=$this->db->select('product_name,sku_code')->like('product_name',$name)->get('product_list')->result_array();
$names=array();
foreach($result as $row){
$names[]=$row['product_name'];
}
echo json_encode($names);
}
【讨论】：
我使用$.each (data [i], function (key, value)的构造
但是您必须将选择字段的名称与表单元素的名称预先匹配。然后，在“成功”之后的循环中，自动完成“数据”数组中的元素。这样做了：autocomplete form with ajax success
【讨论】：
我希望这会有所帮助：
var token = document.getElementById('token').value;
var nombre = document.getElementById('txtNombre').value;
$("#txtNombre").keyup(function () {
$.ajax({
type: "POST",
url: host() + "Formulario/BuscarNombreAutocompletar/",
data: JSON.stringify({ "nombre": nombre }),
headers: {
'Authorization': 'Bearer ' + token
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var dataArray = [];
if (controlCarga(data)) {
$.each(data[1], function (i, item) {
dataArray.push(item.frmNombre)
});
$('#txtNombre').autocomplete({
clearButton: true,
source: dataArray,
selectFirst: true,
minLength: 2
});
}
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error: ' + xhr.responseText);
}
});
});
【讨论】：