使用数组或列表在JSP中自动完成文本框 [英] Autocomplete Textbox in JSP with Using an Array or List
问题描述
我试图以不同的方式进行自动完成，但根本没有任何作用。
来自此处和< a href =http://jqueryui.com/autocomplete/ =nofollow noreferrer>这里
I was trying to make autocomplete in different ways, but nothing works at all. From here and here
希望你帮助我们。我有一个使用Spring MVC + jsp + hibernate的项目。我想创建一个搜索文本框，它也可以作为客户姓氏的自动完成工作。
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.
当我在我的控制器的帮助下打开客户端页面时发送，通过模型，一个包含客户的列表和一个包含姓氏的列表，最后一个用于自动完成。
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.
这是我的控制器：
@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到脚本源的方式：
Then in jsp page I want to add some how my lastNamesList to the script source:
<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>
请你帮我做正确的事。如果我能够从我的控制器使用列表或数组，那将是很棒的。
谢谢。
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我的控制器，添加了json转换，但它没有帮助。看起来脚本在我的页面上不起作用...更加困惑O_o
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。这是我的工作代码：
upd. here is my working code:
控制器：
@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>
希望它可以帮助别人！ ;）
Hope it helps someone else! ;)
推荐答案
从您的更新，
您应该有一个模型类并进行显式转换以发送json对象。要么使用 gson 库，要么可以通过发送列表来使用现有方法。
You should have a model class and do a explicit conversion to send the json object. either using gson library or you can go with the existing method by sending the list .
对于初学者，我建议学习这里很好的例子
For a beginner i would advise to learn from the nice example here
希望这会有所帮助!!
Hope this helps !!
这篇关于使用数组或列表在JSP中自动完成文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
