java 使用数组或列表在 JSP 中自动完成文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26169763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete Textbox in JSP with Using an Array or List
提问by Cooler
I was trying to make autocomplete in different ways, but nothing works at all. From hereand here
我试图以不同的方式进行自动完成，但没有任何效果。从这里和这里
Hope you help me guys. I have a project that uses Spring MVC + jsp + hibernate. I want to create a search textbox, which also will be work as a autocomplete for Last Names of clients.
希望大家帮帮我。我有一个使用 Spring MVC + jsp + hibernate 的项目。我想创建一个搜索文本框，它也可以作为客户姓氏的自动完成功能。
When I open a clients page with help of my Controller I send, via a model, a list with clients and list with Last Names, the last one for autocomplete.
当我在控制器的帮助下打开客户页面时，我通过模型发送一个包含客户的列表和包含姓氏的列表，最后一个用于自动完成。
Here is my controller:
这是我的控制器：
@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";
}
Then in jsp page I want to add some how my lastNamesList to the script source:
然后在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>
my input textbox is:
我的输入文本框是：
<div class="ui-widget">
<input class="form-control" type="search" id="query" name="query" required>
</div>
I thought I could get something like that if I just write source: lastNamesList:
我想我可以得到类似的东西，如果我只写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>
Could you please help me to do this in right way. It would be great if I could be able to use list or array from my controller. Thanks.
你能帮我以正确的方式做到这一点吗？如果我能够使用控制器中的列表或数组，那就太好了。谢谢。
upd.changed my controller, added json conversion, but it didnt help. Looks like scripts dont work on my page...confused even more O_o
upd.changed 我的控制器，添加了 json 转换，但它没有帮助。看起来脚本在我的页面上不起作用...更困惑 O_o
upd. here is my working code:
更新。这是我的工作代码：
Controller:
控制器：
@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;
}
script:
脚本：
$(document).ready(function () {
$("#lastNameAuto").autocomplete({
source: 'clients/searchlastname'
});
});
in jsp:
在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>
Hope it helps someone else! ;)
希望它可以帮助别人！;)
采纳答案by Santhosh
From your update ,
从你的更新，
You should have a model class and do a explicit conversion to send the json object. either using gsonlibrary or you can go with the existing method by sending the list .
您应该有一个模型类并进行显式转换以发送 json 对象。要么使用gson库，要么您可以通过发送列表来使用现有方法。
For a beginner i would advise to learn from the nice example here
Hope this helps !!
希望这可以帮助 ！！
