Jquery 400 - 自动完成 Spring MVC 不工作

Question

我遇到了自动完成问题 Jquery。我花了一整天的时间尝试各种不同的示例，并一直以相同的错误告终。

我想达到什么目的？

当用户使用 Spring MVC 模式从我的数据库中的搜索栏中输入时，获取我的子类别的下拉列表。

我遇到了什么错误？

我尝试过什么来解决这个问题？

在 Whosebug 和其他各种站点上阅读了有关此特定问题的各种主题之后。我发现这通常是一个问题，因为脚本没有按顺序排列。我已尝试重新排列我的脚本的多种组合，但仍然无法解决此错误。

这是我的header.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="resources/js/jquery-3.1.1.min.js"></script>
<script src="resources/js/angular.min.js"></script> 
<link href="resources/css/bootstrap.min.css" rel="stylesheet" />
<script src="resources/js/bootstrap.min.js"></script>   
<script src="resources/js/dirPagination.js"></script>
<link href="resources/css/jquery-ui.theme.min.css" rel="stylesheet" />
<script src="resources/js/jquery-ui.min.js"></script>
<link id="sidebarcss" href="resources/css/simple-sidebar.css" rel="stylesheet">
<link href="resources/css/footer-distributed-with-address-and-phones.css" rel="stylesheet" />
<link href="resources/css/megamenu.css" rel="stylesheet" />  
<link href="resources/css/Main.css" rel="stylesheet" />
<link rel="icon" href="resources/images/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>MiniKart</title>

这是我的脚本

$(document).ready(function() {
$(function() {
$("#searchbar").autocomplete({
source: function(request, response) {
$.ajax({
url: "/MiniKart/getSubCategory",
type: "POST",
data: { subCategoryName: request.subCategoryName },
dataType: "json",

success: function(data) {
response($.map(data, function(v,i){
return {
label: v.subCategoryName,
value: v.subCategoryName
};
}));
}
});
}
});
});
});

这是我的控制器

List<SubCategory> data = new ArrayList<SubCategory>();



@RequestMapping(value = "/getSubCategory", method = RequestMethod.POST, produces = "application/json")
 public @ResponseBody List<SubCategory> getSubCategory(@RequestParam String subCategoryName, HttpServletResponse response) {
 return simulateSearchResult(subCategoryName);

}


 private List<SubCategory> simulateSearchResult(String subCategoryName) {

 List<SubCategory> result = new ArrayList<SubCategory>();

 for (SubCategory subCategory : data) {
 if (subCategory.getSubCategoryName().contains(subCategoryName)) {
 result.add(subCategory);
 }
 }

return result;
 }

我正在尝试遵循的当前示例

Spring MVC Autocomplete

一些额外信息

Jquery UI - 1.12.1

日食 - 霓虹灯

Maven 依赖项

    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-asl</artifactId>
        <version>1.9.13</version>
    </dependency>
    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-core-asl</artifactId>
        <version>1.9.13</version>
    </dependency>

我哪里做错了？ 欢迎大家提出建议。谢谢。

Answer 1

经过各种不同的方法终于解决了... 这是我做的

使用自动完成脚本的独立版本。
使用我的类别列表填充数据。
已将 getTags 和 simulateSearchResult 的 return 类型更改为字符串。
使用 Gson 将结果转换为 Json-String 并 return 编辑它。

我的Header

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="resources/js/jquery-3.1.1.min.js"></script>
<script src="resources/js/angular.min.js"></script>
<script src="resources/js/jquery.autocomplete.min.js"></script> 
<link href="resources/css/bootstrap.min.css" rel="stylesheet" />
<script src="resources/js/bootstrap.min.js"></script>   
<script src="resources/js/dirPagination.js"></script>


<link id="sidebarcss" href="resources/css/simple-sidebar.css" rel="stylesheet">
<link href="resources/css/footer-distributed-with-address-and-phones.css" rel="stylesheet" />
<link href="resources/css/megamenu.css" rel="stylesheet" />  
<link href="resources/css/Main.css" rel="stylesheet" />
<link rel="icon" href="resources/images/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>MiniKart</title>

我的脚本

$(document).ready(function() {

$('#searchbar').autocomplete({
    serviceUrl: '${pageContext.request.contextPath}/getTags',
    paramName: "categoryName",
    delimiter: ",",
   transformResult: function(response) {

    return {
      //must convert json to javascript object before process
      suggestions: $.map($.parseJSON(response), function(item) {

          return { value: item.categoryName, data: item.categoryId };
       })

     };

        }

 });

});

我的控制器

@RequestMapping(value = "/getTags", method = RequestMethod.GET)
public @ResponseBody String getTags(@RequestParam String categoryName) {

    return simulateSearchResult(categoryName);

}

private String simulateSearchResult(String categoryName) {

    List<Category> result = new ArrayList<Category>();
    List<Category> data = categoryService.listCategory();
    Gson gson = new GsonBuilder().excludeFieldsWithoutExposeAnnotation().create();
    String j = null;
    // iterate a list and filter by tagName
    for(Category tag : data) {

        if (tag.getCategoryName().contains(categoryName)) {

            result.add(tag);
            j=gson.toJson(result);

        }
    }

    return j;
}

Jquery 400 - 自动完成 Spring MVC 不工作

Jquery 400 - Autocomplete Spring MVC Not Working

ajax

jquery

jquery-ui

spring-mvc

jquery-ui-autocomplete