Java Web 技术中的 AJAX 自动完成文本框（JSP 和 servlet）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19322513/
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
AJAX autocomplete textbox in Java web technology (JSP and servlets)
提问by David_E
Please I need your assistance on how to make HTML input text element work like "Google's AJAX search engine" input text element with Java web technology (JSP, servlets and AJAX). Data on the drop-down list will be from a database table, e.g MySQL or Microsoft SQL databases respectively.
关于如何使用 Java Web 技术（JSP、servlet 和 AJAX）使 HTML 输入文本元素像“Google 的 AJAX 搜索引擎”输入文本元素一样工作，我需要您的帮助。下拉列表中的数据将分别来自数据库表，例如 MySQL 或 Microsoft SQL 数据库。
I studied the NetBeans tutorial on this, but selecting a value from the drop-down list to appear in the HTML input text element isn't possible with that tutorial. Here's the link.
我研究了 NetBeans 教程，但该教程无法从下拉列表中选择一个值以显示在 HTML 输入文本元素中。这是链接。
Thanks.
谢谢。
回答by Vinoth Krishnan
@user2870719 You can try like following, In your jsp page send a ajax request to a servlet/jsp and fill the response data in a javascript variable. So you can get the jQuery autocomplete textbox as i mentioned above.
@user2870719 您可以尝试如下操作，在您的 jsp 页面中，向 servlet/jsp 发送 ajax 请求，并将响应数据填充到 javascript 变量中。所以你可以得到我上面提到的 jQuery 自动完成文本框。
<%@page import="java.sql.*"%>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function showData(value){
$.ajax({
url : "ur_servlet?name="+value,
type : "POST",
async : false,
success : function(data) {
//Do something with the data here
}
});
}
</script>
</head>
<body>
<form name="employee">
<input type="text" name="name" id="name" onkeyup="showData(this.value);"><br>
</table>
</body>
</html>
And in servlet,
而在 servlet 中，
String name = request.getParameter("name");
String buffer="";
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from data where name like '"+name+"%'");
while(rs.next())
{
buffer=buffer+"'"+rs.getString("name")+"',";
}
response.getWriter().println(buffer);
}
catch (Exception e) {
e.printStackTrace();
}
Finally send the response to jsp page. Let me know if this helps..
最后将响应发送到jsp页面。让我知道这是否有帮助..
回答by Bharathiraja
Autocomplete- Jquery Ajax Json Example in Java(using Servlet)
自动完成 - Java 中的 Jquery Ajax Json 示例（使用 Servlet）
Here am using devbridge jquery api to achieve the autocomplete functionality.
Requirements:
Eclipse
Mysql (or you can use any other database ,but in lib folder you must add appropriate driver
for that database)
To get country list
For Mysql
https://github.com/bharathirasa/demo/blob/master/mysql-country-list-codes.sql
这里使用 devbridge jquery api 来实现自动完成功能。
要求：
Eclipse
Mysql（或者您可以使用任何其他数据库，但在 lib 文件夹中，您必须为该数据库添加适当的驱动程序）
要获取
Mysql 的
国家/地区列表https://github.com/bharathirasa/demo/blob/master/mysql- country-list-codes.sql
For Oracle https://github.com/bharathirasa/demo/blob/master/oracle-country-list.sql
对于 Oracle https://github.com/bharathirasa/demo/blob/master/oracle-country-list.sql
HTML Code<input type="text" name="country" id="autocomplete"
class="form-control" placeholder="Enter Country name" />
HTML代码<input type="text" name="country" id="autocomplete"
class="form-control" placeholder="Enter Country name" />
Jquery Code
查询代码
$("#autocomplete").autocomplete({
//lookup: countries,
serviceUrl:'Auto', //tell the script where to send requests
width: 450, //set width
//callback just to show it's working
onSelect: function (suggestion) {
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
showNoSuggestionNotice: true,
noSuggestionNotice: 'Sorry, no matching results',
});
Servlet Code
服务程序代码
String q=request.getParameter("query");
ArrayList<Country> o=CountryDao.getCountryName(q);
Gson gson = new Gson();
// convert java object to JSON format,
// and returned as JSON formatted string
String json = gson.toJson(o);
//System.out.println(json);
response.getWriter().write("{\"suggestions\":"+json+"}");
Here the method is not mentioned so all the data will be passed as GET method. If you want to pass the data through post mention in Jquery like type:'POST'.
hi actually i created an autocomplete in java using devbridge jquery api
这里没有提到该方法，因此所有数据都将作为 GET 方法传递。如果您想通过 Jquery 中的 post 提及传递数据，例如 type:'POST'。
嗨，实际上我使用 devbridge jquery api 在 java 中创建了一个自动完成
follow the link to get more info
点击链接获取更多信息
http://pdfboxtutorial.blogspot.com/2015/03/autocomplete-jquery-ajax-json-example.html
http://pdfboxtutorial.blogspot.com/2015/03/autocomplete-jquery-ajax-json-example.html
