从json对象格式的ajax响应中获取值,并通过jQuery自动完成框实现自动完成。
{ "consignmentList" : [ "" , "AAA" , "ABC" , "BHU" , "MAN" , "WER" , "ZXC"]}
$(document).ready(function() {
$("input#autoText").autocomplete({
width: 300,
max: 10,
delay: 100,
minLength: 1,
autoFocus: true,
cacheLength: 1,
scroll: true,
highlight: false,
source: function(request, response) {
$.ajax({
url: "/jqueryreturn",
dataType: "json",
type: "POST",
data: request,
success: function(data) {
//console.log( data);
var items = data;
response(items);
},
error: function(jqXHR, textStatus, errorThrown) {
//console.log( textStatus);
}
});
}
});
});
<link href="http://www.jqueryautocomplete.com/js/jquery/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.autocomplete.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.position.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.widget.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.core.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="autoText" type="text" class="inputlt" name="consignmentId" value="${(consign._id)!" "}" id="c" style="font-size: 16px " onclick="clearInput(this)">
<ul id="consignmentList"></ul>
答案 0 :(得分:0)
在您的成功处理程序中,使用items.consignmentList
调用response()success: function(data) {
var items = data;
response(items.consignmentList);
}
您的服务器将jQuery自动解析的JSON发送回JavaScript对象。这是因为您已将dataType设置为&#39; json&#39;。
因此,成功回调中的data
变量是具有一个属性consignmentList
的常规JS对象。
您以items.consignmentList
方式访问该属性,该属性提供了一个您想要自动完成的字符串数组。