Question

我遇到了自动完成Jquery的问题。我花了一整天时间尝试各种不同的例子，并且最终仍然遇到同样的错误。

我想要实现的目标是什么？

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

我面临什么错误？

我试图解决这个问题是什么？

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

这是我的标题。

<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

Eclipse - 霓虹灯

Maven Dependencies

    <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＆amp;的返回类型simulateSearchResult to String。
使用Gson将结果转换为Json-String并返回它。

我的标题

<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不工作

1 个答案: