【发布时间】：2014-11-27 23:16:39
【问题描述】：
我试图以不同的方式进行自动完成，但根本没有任何效果。 来自here 和here
希望你们帮助我。我有一个使用 Spring MVC + jsp + hibernate 的项目。我想创建一个搜索文本框，它也可以作为客户姓氏的自动完成功能。
当我在控制器的帮助下打开客户页面时，我会通过模型发送包含客户的列表和包含姓氏的列表，最后一个用于自动完成。
这是我的控制器：
@Controller
@RequestMapping("/clients")
public class ClientsController {
@Autowired
public ClientsService clientsService;
@Autowired
private ServicesService servicesService;
@Autowired
private OrdersService ordersService;
@Autowired
private Order_serviceService order_serviceService;
@Autowired
private ObjectMapper objectMapper;
@RequestMapping(method = RequestMethod.GET)
public String listClients(Model model) {
List<Clients> allClients = clientsService.listClients(
new RequestAllClientsEvent()).getClients();
List<String> lastNamesList = new ArrayList<>();
for(int i = 0; i < allClients.size(); i++){
lastNamesList.add(allClients.get(i).getLast_name());
}
Collections.sort(lastNamesList);
String json = "";
try{
json = objectMapper.writeValueAsString(lastNamesList);
} catch(Exception e){}
model.addAttribute("clientsList", allClients);
model.addAttribute("lastNamesList", json);
return "clients";
}
然后在jsp页面中我想添加一些我的lastNamesList到脚本源：
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#query" ).autocomplete({
source: lastNamesList
});
});
</script>
</head>
我的输入文本框是：
<div class="ui-widget">
<input class="form-control" type="search" id="query" name="query" required>
</div>
我想如果我只写source: lastNamesList，我就能得到类似的东西：
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
您能帮我以正确的方式做到这一点吗？如果我能够从我的控制器中使用列表或数组，那就太好了。 谢谢。
upd.changed 我的控制器，添加了 json 转换，但它没有帮助。看起来脚本在我的页面上不起作用...更加困惑 O_o
更新。这是我的工作代码：
控制器：
@RequestMapping(value = "/searchlastname", method = RequestMethod.GET, headers = "Accept=*/*")
public
@ResponseBody
List<String> searchLastName(@RequestParam("term") String query) {
List<Clients> clientsList = clientsService.searchClient(new SearchClientEvent(query)).getClients();
List<String> lastnameList = new ArrayList<>();
System.out.println("Found clients size: " + clientsList.size());
for (Clients clients : clientsList) {
lastnameList.add(clients.getLast_name());
}
Collections.sort(lastnameList);
return lastnameList;
}
脚本：
$(document).ready(function () {
$("#lastNameAuto").autocomplete({
source: 'clients/searchlastname'
});
});
在jsp中：
<form class="form-horizontal" role="form" action="<c:url value="/clients/search"/>" method="get">
<div class="input-group input-group-sm">
<span class="input-group-addon"><spring:message code="label.enterClientInfo"/></span>
<input class="form-control" type="search" id="lastNameAuto" name="query" required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<spring:message code="label.searchClient"/>
</button>
</span>
</div>
</form>
希望它可以帮助别人！ ;)
【问题讨论】：
-
我认为您混淆了服务器端与客户端逻辑。您尝试编写的javascript（客户端）试图依赖服务器端对象（lastNamesList）。客户端将不知道 lastNamesList 是什么，您将不得不使用标签来完全迭代该列表并生成 javascript 客户端代码。
-
是的，我是这个领域的新手！ :) 无论如何我找到了解决方案，我们可以将列表转换为 json！我马上改代码！
-
好吧，欢迎来到编程，这是一个不错的领域。但是，您可能仍然会遇到服务器端与客户端的相同问题。这意味着，您需要从您的 java 脚本发出第二个 http 请求以从服务器以 json 格式获取自动完成值，或者您需要打印该 json 对象以创建 javascript 代码。 Javascript 无法与用于呈现 html 页面的服务器端 java 对象进行通信。
标签： java jquery jsp spring-mvc autocomplete