如何使用ajax从自动完成框中获取选定的值

我可以使用ajax autocomplete在文本框中显示数据库中的数据。

我有一个要求，就像我们需要从下面显示的名称中选择一个名称，并使用“alert”消息显示我们选择的名称。 我发布了我的所作所为。

的index.jsp

             
 
Autocomplete in java web application using Jquery and JSON
 
 
 
 
 
  
 
   

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

 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 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 getFrameWork(String frameWork) { ArrayList list = new ArrayList(); 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中

  index.jsp   SearchController com.servlet.Controller   SearchController /SearchController  

Answer 1

我有这样的Servlet 。

我试图将值返回给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); 

并且在输出控制台中也没有错误。

Answer 2

您只将source属性添加到autocompletefunction。 您需要根据需要添加selectfunction。

原型应该是这样的，

 $( ".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; } }); 

• 参考

  1. jQuery自动完成自定义数据
  2. jQuery自动完成选择事件