MaxInterview - sugesstion search jsp

showing results for - "sugesstion search jsp"
29 Jun 2017
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