如何使用Ajax从自动完成框获取选定的值 [英] How to get selected value from autocomplete box using ajax
本文介绍了如何使用Ajax从自动完成框获取选定的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我能够使用Ajax自动完成功能在文本框中显示数据库中的数据.
I am able to display the data from database in a textbox using ajax autocomplete.
我有一个要求，例如我们需要从下面显示的名称中选择一个名称，并显示使用警报"消息选择的名称.我要发布我所做的事情.
I have a requirement like we need to select a name from the names shown below and display the name that we selected using "alert" message. I am posting for what i did.
index.jsp
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>
autocompleter.js
autocompleter.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
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
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
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>
推荐答案
我有一个像这样的 Servlet .
我正在尝试将值返回给 js .
I am trying to return the value to js.
我没有在 js
try {
String term = request.getParameter("term");
Class.forName(driverName);
connection = DriverManager.getConnection(connectionUrl, userId, password);
System.out.println("Connection Success");
ps = connection.prepareStatement("SELECT * FROM sample WHERE Name LIKE ?");
ps.setString(1, term + "%");
resultSet = ps.executeQuery();
while (resultSet.next()) {
data = resultSet.getString("NAME");
list.add(data);
System.out.println(resultSet.getString("Name"));
}
String searchList = new Gson().toJson(list);
response.setContentType("application/json");
response.getWriter().write(searchList);
，输出控制台中也没有错误.
and also no errors in output console.
这篇关于如何使用Ajax从自动完成框获取选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
