0
私は春のMVCで小さなJava Webアプリケーションを作成しました。私はmysql dbからテーブルをリストするWebページを持っています。Java Webアプリケーションで送信ボタンなしで検索フィールドとして機能するテキストフィールドを作成する方法
webpage displaying information from db
今、私はキーボードを打つの検索アクションはボタンなしで入力しないテストボックスを持っていると思います。
コードが
<body>
<form:form action="client.do" method="POST" commandName="client">
<table>
<tr>
<td><input type="text" name="clientname" /></td>
<td colspan="2">
<input type="submit" name="action" value="Search" />
</td>
</tr>
</table>
</form:form>
</body>
ClientController.java
@RequestMapping("/clientlist")
public String clientPage(Map<String, Object> map){
Client client = new Client();
map.put("client", client);
map.put("clientList", clientService.getAllClient());
return "clientlist";
}
@RequestMapping(value="/client.do", method=RequestMethod.POST)
public String doActions(@ModelAttribute Client client, BindingResult result, @RequestParam String action, Map<String, Object> map){
Client clientResult = new Client();
boolean isSearch = false;
switch(action.toLowerCase()){
case "add":
clientService.add(client);
clientResult = client;
break;
case "edit":
clientService.edit(client);
clientResult = client;
break;
case "delete":
clientService.delete(client.getClientname());
clientResult = new Client();
break;
case "search":
Client searchedClient = clientService.getClient(client.getClientname());
clientResult = searchedClient!=null ? searchedClient : new Client();
isSearch = true;
break;
}
if(isSearch) {
List<Client> list = new ArrayList<Client>();
list.add(clientResult);
map.put("clientList", list);
} else {
map.put("clientList", clientService.getAllClient());
map.put("client", clientResult);
}
return "clientlist";
}
次に検索テーブルを有する
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Enterprise Applications <span class="sr-only">(current)</span></a></li>
<li><a href="#">Application Servers</a></li>
<li><a href="#">WebServers</a></li>
<li><a href="#">Clusters</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Clients</h1>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<td><%@ include file="/WEB-INF/jsp/globalfilter.jsp" %></td>
</tr>
<thead>
<tr>
<th>Application Name</th>
<th>Client Type</th>
<th>Client Name</th>
<th>Hostname</th>
<th>Environment</th>
</tr>
</thead>
<tbody>
<c:forEach items="${clientList}" var="client">
<tr>
<td>${client.applicationname}</td>
<td>${client.clienttype}</td>
<td>${client.clientname}</td>
<td>${client.hostname}</td>
<td>${client.envtype}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
clientlist.jsp
以下globalfilter.jspとしてI元気？ dアクションを実行する送信ボタン「検索」、入力キーを押すことによって検索結果を達成する方法。
ここに[mcve]を入力できました。しかし、基本的には、Javascriptでこの動作を追加する必要があります。 keylistenerは、キープレスでフォームを送信するには、ここで多くを見つけるでしょう – AxelH