Question

我可以使用ajax自动完成功能在文本框中显示数据库中的数据。

我有一个要求，就像我们需要从下面显示的名称中选择一个名称，然后使用＆＃34; alert＆＃34;显示我们选择的名称。信息。我正在为我所做的事情发帖。

的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

$(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>

Answer 1

您仅向source功能添加了autocomplete属性。您需要根据需要添加select功能。

原型应该是这样的，

$( ".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 autocomplete custom data
2. jQuery autocomplete select event

Answer 2

我有像这样的 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);

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

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

2 个答案: