Sunday, March 31, 2013

Autocomplete Textbox in JSP using jQuery with odbc connection

step 1

find odbc adminstrator


step2 
click on add button

step3
select access driver

step4
Enter DSN and Description
choose your access data base file then click ok.
 
now your odbc created.



 step5
 create dynmic java project
look like this folder structure


download jquery library then add js folder
1. jquery.autocomplete.js
2. jquery-1.4.2.min.js

index.jsp

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script>
jQuery(function(){
$("#name").autocomplete("List.jsp");
});
</script>

</head>
<body>
<br><br><center>
<font face="verdana" size="2">
<font size="4">jsp and jQuery Autocompleter Example ::: <font color="#809e02">http://corejavaexample.blogspot.in/</font></font>
<br><br><br><br>

Select Country   :
<input type="text" id="name" name="name"/>

</font>
</body>
</html>


  List.jsp



<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>


<%
       try {
              String s[] = null;

              Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
              Connection con = DriverManager
                           .getConnection("jdbc:odbc:himadb");
              Statement st = con.createStatement();
              ResultSet rs = null;
              rs = st.executeQuery("select * from sample");

              List li = new ArrayList();

              while (rs.next()) {
                     li.add(rs.getString(2));
              }

              String[] str = new String[li.size()];
              Iterator it = li.iterator();

              int i = 0;
              while (it.hasNext()) {
                     String p = (String) it.next();
                     str[i] = p;
                     i++;
              }

              //jQuery related start
              String query = (String) request.getParameter("q");

              int cnt = 1;
              for (int j = 0; j < str.length; j++) {
                     if (str[j].toUpperCase().startsWith(query.toUpperCase())) {
                           out.print(str[j] + "\n");
                           if (cnt >= 5)// 5=How many results have to show while we are typing(auto suggestions)
                                  break;
                           cnt++;
                     }
              }
              //jQuery related end

              rs.close();
              st.close();
              con.close();

       } catch (Exception e) {
              e.printStackTrace();
       }

       //http://corejavaexample.blogspot.in/
%>


style.css




ac_results {
    padding: 0px;
    border: 1px solid #84a10b;
    background-color: #84a10b;
    overflow: hidden;
}
.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    color: #fff;
    font-family:verdana;
    /*
    if width will be 100% horizontal scrollbar will apear
    when scroll mode will be used
    */
    /*width: 100%;*/
    font-size: 12px;
    /*
    it is very important, if line-height not setted or setted
    in relative units scroll will be broken in firefox
    */
    line-height: 16px;
    overflow: hidden;
}
.ac_loading {
    background: white url('../images/indicator.gif') right center no-repeat;
}
.ac_odd {
    background-color: #84a10b;
    color: #ffffff;
}
.ac_over {
    background-color: #5a6b13;
    color: #ffffff;
}
.input_text{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    border:1px solid #84a10b;
    padding:2px;
    width:150px;
    color:#000;
    background:white url(../images/search.png) no-repeat 3px 2px;
    padding-left:17px;
}


step 6
run project





 source code here

No comments:

Post a Comment

How ChatGPT can Benefit Coding: Your Guide to Leveraging an AI Language Model

 Introduction: Hello, coders! Welcome to this blog post on how ChatGPT, an AI language model, can benefit your coding skills and projects. A...