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

我面臨自動完成Jquery的問題。我花了整整一天的時間嘗試各種不同的例子，並不斷得出同樣的錯誤。Jquery 400 - 自動完成Spring MVC不工作

我想實現什麼？

當用戶使用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用戶界面 - 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>

我在做什麼錯在這裏？歡迎您提出任何建議。謝謝。

來源

2016-11-15 Sadiqali Zaveri

終於解決了之後各種不同的方法...... 這裏是我做過什麼

使用自動完成腳本的獨立版本。
使用我的分類列表填充數據。
更改getTags的返回類型& simulateSearchResult爲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; 
}

來源

2016-11-16 07:43:28

GSON我沒有得到花花公子 – jeevanswamy21

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

回答

相關問題