数据列表显示为空，而我可以在谷歌chrome的"网络"选项卡上看到它。我想使用Jquery实现自动完成功能来检索地址。在后端，我使用spring引导，并从数据库中检索地址列表。一切都很好，我可以在浏览器上获取Json数据，并可以在chrome的网络选项卡上看到它。可能缺乏一些逻辑来正确地实现它。一张照片会说得更好。
网络选项卡上的json数据
和前端
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#automplete-1" ).autocomplete({
source: "/addressAutocomplete",
autoFocus:true,
minLength: 2,
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "a" or "s"</p>
<label for = "automplete-1">Tags: </label>
<input id = "automplete-1">
</div>
</body>
</html>
控制器
@GetMapping("/addressAutocomplete")
@ResponseBody
public List<Address> getSearchdata (@RequestParam(value = "term", defaultValue = "", required = false) String term){
/*List<String> list=new ArrayList<String>();
list.add("subodh");
list.add("surender");
return list;*/
System.out.println("service -->"+searchService.fetchAddress().toString());
return searchService.fetchAddress();
}
可以在浏览器上看到数据，但无法使用自动完成功能提取数据
Json数据
您正在从服务器获取数据，因此必须使用ajax调用类似于的东西
$("#automplete-1).on("keyup",function(){ //put different event accordingly
$.ajax({
url:'/addressAutocomplete',
type:'get',
success:function(data)
{
$(function() {
$( "#automplete-1" ).autocomplete({
source: data,
autoFocus:true,
minLength: 2,
});
});
}
});
});
有关更多信息，您可以查看文档-https://jqueryui.com/autocomplete/由于json数组包含地址属性，您可能需要将这些属性组合成一个字符串。