title: How to get selected value from autocomplete box using ajax
body: <p>I am able to display the data from database in a textbox using ajax autocomplete.<a href="https://i.stack.imgur.com/kyDpK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kyDpK.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>index.jsp</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Autocomplete in java web application using Jquery and JSON&lt;/title&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="autocompleter.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;!-- User defied css --&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
          &lt;h3&gt;Autocomplete in java web application using Jquery and JSON&lt;/h3&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;div class="search-container"&gt;
          &lt;div class="ui-widget"&gt;
                  &lt;input type="text" id="search" name="search" class="search" /&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>autocompleter.js</p>
  
  <pre><code>$(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);
                      }
               });
            }
        });
     });
  });
  </code></pre>
  
  <p>Controller.java</p>
  
  <pre><code>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&lt;String&gt; list = dataDao.getFrameWork(term);
  
                          String searchList = new Gson().toJson(list);
                          response.getWriter().write(searchList);
                  } catch (Exception e) {
                          System.err.println(e.getMessage());
                  }
          }
  }
  </code></pre>
  
  <p>DataDao.java</p>
  
  <pre><code>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&lt;String&gt; getFrameWork(String frameWork) {
          ArrayList&lt;String&gt; list = new ArrayList&lt;String&gt;();
          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;
      }
  }
  </code></pre>
  
  <p>DBUtility.java</p>
  
  <pre><code>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;
          }
      }
  }
  </code></pre>
  
  <p>web.xml</p>
  
  <pre><code>&lt;welcome-file-list&gt;
     &lt;welcome-file&gt;index.jsp&lt;/welcome-file&gt;
  &lt;/welcome-file-list&gt;
  &lt;servlet&gt;
    &lt;servlet-name&gt;SearchController&lt;/servlet-name&gt;
  &lt;servlet-class&gt;com.servlet.Controller&lt;/servlet-class&gt;
  &lt;/servlet&gt;
  &lt;servlet-mapping&gt;
    &lt;servlet-name&gt;SearchController&lt;/servlet-name&gt;
    &lt;url-pattern&gt;/SearchController&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt;
  </code></pre>