自动完成请求/服务器响应是什么样子的？
这似乎是一个黑洞:在搜索了一个小时的jQuery UI网站、Stack、Overflow和googling之后，我还没有找到如何编写AutoComplete服务器端的最基本的信息。
传递给服务器的参数是什么? JSON响应应该是什么样子的？
我一定是漏掉了什么，因为其他人是怎么学会怎么做的？站点似乎只讨论客户端的JavaScript代码，而不讨论协议或服务器端的示例。
我需要足够让最简单的远程示例正常工作。
回答 4
Stack Overflow用户
发布于 2014-03-01 14:57:43
到目前为止，这两个答案都是复杂和误导性的，JSON自动完成的一个关键理解是成功的匿名函数，由于AutoComplete的成功回调，您可以利用/控制服务器端jQuery响应的格式。标签，值格式是一个很好遵循的格式，但你可以定义任何你想要的JSON格式，关键是你如何定义你的成功函数：
<input id="refPaymentTerms" class="form-control">
$("#refPaymentTerms").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/admin/JobPaymentRefs",
dataType: "json",
data: {
term: request.termCode
},
error: function (xhr, textStatus, errorThrown) {
alert('Error: ' + xhr.responseText);
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.label,
value: item.value
}
}));
}
});
}
});MVC控制器：
public JsonResult JobPaymentRefs()
{
var query = from REFTerm in _db.REFTerms
select new
{
label = REFTerm.TermCode,
value = REFTerm.TermCode
};
//var refTerms = _db.REFTerms.Select(x => x.TermCode);
return Json(query.ToArray());
}在这里，我们看到了一个非常标准的自动完成绑定与ASP.NET后端。
只要在AutoComplete匿名回调中正确映射，就可以返回服务器端所需的任何格式的JSON。标签、值、名称、值对对于大多数需求已经足够好了，但是只要在AutoComplete成功回调中正确地映射它，就可以像服务器端一样使用JSON。
Stack Overflow用户
发布于 2017-08-18 18:31:35
下面的代码对我来说很有效。这需要json编码的数据才能工作。一旦我们获得数据，它就会根据jQuery自动完成格式对其进行修改，并启用选择
var $url = "http://some-url/get-json";
//name is the id of the textbox where autocomplete needs to be shown
$('#name').autocomplete(
{
source: function(request,response)
{
//gets data from the url in JSON format
$.get($url, function(data)
{
obj = JSON.parse(data); //parse the data in JSON (if not already)
response($.map(obj, function(item)
{
return {
label: item.full_name,
value: item.full_name,
id:item.id,
email:item.email,
phone:item.phone,
}
}
)); //end response
}); //end get
},
select:function(event, ui)
{
console.log(ui.item.full_name);
console.log(ui.item.email);
}
}); //end of autocompleteStack Overflow用户
发布于 2019-08-11 15:38:21
下面的自动完成代码来自https://jqueryui.com/autocomplete/#remote-jsonp
演示链接：https://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html
以下是源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "search.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
} );
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</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>
</body>
</html>https://stackoverflow.com/questions/5077409
复制相似问题