autu suggestion jsp

Solutions on MaxInterview for autu suggestion jsp by the best coders in the world

showing results for - "autu suggestion jsp"

06 Feb 2020

1<%@page contentType="text/html" pageEncoding="UTF-8"%>
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6        <title>Autocomplete Searchbox using jQuery, Ajax, JSP and Oracle Database</title>
7        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
8    </head>
9    
10    <body>    
11    <nav class="navbar navbar-default navbar-static-top">
12      <div class="container">
13        <div class="navbar-header">
14            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
15                <span class="sr-only">Toggle navigation</span>
16                <span class="icon-bar"></span>
17                <span class="icon-bar"></span>
18                <span class="icon-bar"></span>
19          </button>
20            <a class="navbar-brand" href="https://onlyxscript.blogspot.com/">onlyxscript.blogspot.com</a>
21        </div>
22        <div id="navbar" class="navbar-collapse collapse">
23            <ul class="nav navbar-nav">
24                <li class="active"><a href="https://onlyxscript.blogspot.com/2018/11/autocomplete-searchbox-using-jquery.html">Back to Tutorial</a></li>
25            </ul>       
26        </div><!--/.nav-collapse -->
27      </div>
28    </nav>
29
30        <div class="container">
31            <label>Enter Country Name</label>
32            <input type="text" id="txtCountry" class="form-control" placeholder="enter country name">
33            <div id="showList">
34                <ul class="list-group">
35                </ul>
36            </div>
37        </div>
38    </body>
39</html>
40
41<script src="js/jquery-1.12.4-jquery.min.js" type="text/javascript"></script>
42<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
43<script type="text/javascript">
44        $(document).ready(function(){
45            $('#txtCountry').keyup(function(){
46                var search=$('#txtCountry').val();
47                if(search !=='' && search !==null)
48                {    
49                    $.ajax({ 
50                       type:'POST',
51                       url:'record.jsp',
52                       data:'key='+search,
53                       success:function(data)
54                       {
55                           $('#showList').html(data);
56                       }
57                    }); 
58                }
59                else
60                {
61                    $('#showList').html('');
62                }
63            });
64            $(document).on('click','li',function(){
65               $('#txtCountry').val($(this).text());
66            });
67        });
68</script>

source

Ayisha

12 Sep 2016

1<%@page import="java.sql.ResultSet"%>
2<%@page import="java.sql.PreparedStatement"%>
3<%@page import="java.sql.Connection"%>
4<%@page import="java.sql.DriverManager"%>
5
6<%
7    if(request.getParameter("key")!=null) //get "key" variable from jquery & ajax  part this line "data:'key='+search" and check not null 
8    {
9        String key=request.getParameter("key"); //get "key" variable store in created new "key" variable
10        String wild="%" +key+ "%"; //remove "%" for use preparedstatement in query name like, and "key" variable store in "wild" variable for further use
11        
12        String url="jdbc:oracle:thin:@localhost:1521:XE"; //database url string
13        String username="system"; //database username
14        String password="tiger"; //database password
15
16        try
17        {
18            Class.forName("oracle.jdbc.driver.OracleDriver"); //load driver
19            Connection con=DriverManager.getConnection(url,username,password); //create connection
20
21            PreparedStatement pstmt=null; //create statement
22
23            pstmt=con.prepareStatement("SELECT * FROM country WHERE name LIKE ? "); //sql select query
24            pstmt.setString(1,wild); //above created "wild" variable set in this
25            ResultSet rs=pstmt.executeQuery(); //execute query and set in ResultSet object "rs".
26           
27            while(rs.next())
28            {
29                %>
30                    <li class="list-group-item"><%=rs.getString("name")%></li>
31                <%
32            }
33                con.close(); //close connection
34        }
35        catch(Exception e)
36        {
37            e.printStackTrace();
38        }
39    }
40%>
41

source