关于html：Java网络技术(JSP和servlet)中的AJAX自动完成文本框


AJAX autocomplete textbox in Java web technology (JSP and servlets)

在使用Java Web技术(JSP，Servlet和AJAX)使HTML输入文本元素(例如" Google的AJAX搜索引擎")输入文本元素如何工作方面，我需要您的帮助。下拉列表中的数据将分别来自数据库表，例如MySQL或Microsoft SQL数据库。

我对此进行了研究，但是在该教程中无法从下拉列表中选择一个值显示在HTML输入文本元素中。这是链接。

谢谢。

相关讨论

@ user2870719您可以尝试如下操作：在jsp页面中，向servlet / jsp发送ajax请求，然后将响应数据填充到javascript变量中。因此，您可以获得如上所述的jQuery自动完成文本框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@page import="java.sql.*"%>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 
<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
    }
});
}

</head>
<body>
<form name="employee">
<input type="text" name="name" id="name" onkeyup="showData(this.value);">


</table>
</body>
</html>

在servlet中，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();
 }

最后将响应发送到jsp页面。让我知道这是否有帮助..

相关讨论

自动完成-Java中的Jquery Ajax Json示例(使用Servlet)

这里使用devbridge jquery api实现自动完成功能。
要求：
蚀
Mysql(或者您可以使用任何其他数据库，但是必须在lib文件夹中添加适当的驱动程序
对于该数据库)
获取国家清单
对于MySQL
https://github.com/bharathirasa/demo/blob/master/mysql-country-list-codes.sql

对于Oracle
https://github.com/bharathirasa/demo/blob/master/oracle-country-list.sql

HTML代码
<input type="text" name="country" id="autocomplete"
class="form-control" placeholder="Enter Country name" />

jQuery代码

1
2
3
4
5
6
7
8
9
10
11
     $("#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代码

1
2
3
4
5
6
7
8
                                     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+"}");

此处未提及该方法，因此所有数据将作为GET方法传递。如果您想通过Jquery中的帖子提及传递数据，例如：a€？POSTa€?。

嗨，实际上我使用devbridge jquery api

在Java中创建了自动完成功能

点击链接以获取更多信息

http://pdfboxtutorial.blogspot.com/2015/03/autocomplete-jquery-ajax-json-example.html