如何使用ajax從自動完成框中獲取選定的值

我能夠使用ajax自動完成在文本框中顯示數據庫中的數據。如何使用ajax從自動完成框中獲取選定的值

我有一個要求，就像我們需要從下面顯示的名稱中選擇一個名稱，並顯示我們使用「alert」消息選擇的名稱。我張貼我所做的。

的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>

來源

2016-04-27 FIFA oneterahertz

我有一個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);

，也沒有錯誤輸出控制檯。

來源

2017-11-09 10:30:28 Vijai

你只加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

來源

2016-04-27 11:27:40

謝謝你。還有一個問題。我們可以存儲在變量中選擇的名稱並將其傳遞到另一頁 –

歡迎..是的，你可以做。將其存儲在任何隱藏的元素（比如文本框）中並傳遞值。 –

如何使用ajax從自動完成框中獲取選定的值

回答

相關問題