我能够使用 ajax 自动完成在文本框中显示数据库中的数据。 
我有一个要求，比如我们需要从下面显示的名称中选择一个名称，并使用“警报”消息显示我们选择的名称。我正在发布我所做的事情。
index.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and JSON</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- User defied css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h3>Autocomplete in java web application using Jquery and JSON</h3>
</div>
<br />
<br />
<div class="search-container">
<div class="ui-widget">
<input type="text" id="search" name="search" class="search" />
</div>
</div>
</body>
</html>
自动完成器.js
$(document).ready(function() {
$(function() {
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "SearchController",
type : "GET",
data : {
term : request.term
},
dataType : "json",
success : function(data) {
response(data);
}
});
}
});
});
});
Controller .java
package com.servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.DataDao;
import com.google.gson.Gson;
public class Controller extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
try {
String term = request.getParameter("term");
System.out.println("Data from ajax call " + term);
DataDao dataDao = new DataDao();
ArrayList<String> list = dataDao.getFrameWork(term);
String searchList = new Gson().toJson(list);
response.getWriter().write(searchList);
} catch (Exception e) {
System.err.println(e.getMessage());
}
}
}
DataDao.java
package com.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
public class DataDao {
private Connection connection;
public DataDao() throws Exception {
connection = DBUtility.getConnection();
}
public ArrayList<String> getFrameWork(String frameWork) {
ArrayList<String> list = new ArrayList<String>();
PreparedStatement ps = null;
String data;
try {
ps = connection
.prepareStatement("SELECT * FROM marketing_database.lead WHERE Company_Name LIKE ?");
ps.setString(1, frameWork + "%");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
data = rs.getString("Company_Name");
list.add(data);
}
} catch (Exception e) {
System.out.println(e.getMessage());
}
return list;
}
}
DBUtility.java
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
public class DBUtility {
private static Connection connection = null;
public static Connection getConnection() throws Exception {
if (connection != null)
return connection;
else {
// Store the database URL in a string
Class.forName("com.mysql.jdbc.Driver");
// set the url, username and password for the databse
connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/marketing_database","root","root");
return connection;
}
}
}
web.xml
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>SearchController</servlet-name>
<servlet-class>com.servlet.Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SearchController</servlet-name>
<url-pattern>/SearchController</url-pattern>
</servlet-mapping>
最佳答案
您仅向 autocomplete 函数添加了 source 属性。您需要根据需要添加select功能。
原型(prototype)应该是这样的，
$( ".selector" ).autocomplete({
select: function( event, ui ) {}
});
请参阅下面修改后的代码，
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "SearchController",
type : "GET",
data : {
term : request.term
},
dataType : "json",
success : function(data) {
response(data);
}
});
},
select: function( event, ui ) {
alert( ui.item.value );
// Your code
return false;
}
});
关于jquery - 如何使用ajax从自动完成框中获取选定的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36887387/